svg的深入学习（二）

151 阅读 0 评论 100 点赞

我是靠谱客的博主昏睡山水，这篇文章主要介绍svg的深入学习（二），现在分享给大家，希望可以做个参考。

svg的继续探讨与研究

通过最近的学习，对svg结合javaScript方面实现了一些特效

1.鼠标触发事件的应用：

在svg中，鼠标移入移出目标区域的事件：mouseover、mouseout

例如，在svg的rect中：

复制代码

1
2
<set attributeName="fill" to="#FFB5B5" begin="mouseover"/>
<set attributeName="fill" to="#FFAAD5" begin="mouseout"/>

注意：attributeName：rect的属性，to：颜色值 begin：触发的事件

2.图片移动事件：onmousedown

在svg的rect中：οnmοusedοwn="selectElement(evt)"

以下代码是我做项目时的js函数

复制代码

function selectElement(evt) {
        selectedElement = evt.target;
        currentX = evt.clientX;
        currentY = evt.clientY;
        currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');

for(var i=0; i<currentMatrix.length; i++) {
            currentMatrix[i] = parseFloat(currentMatrix[i]);
        }

selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
        selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
        selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    }
    function moveElement(evt){
        dx = evt.clientX - currentX;
        dy = evt.clientY - currentY;
        currentMatrix[4] += dx;
        currentMatrix[5] += dy;
        newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

selectedElement.setAttributeNS(null, "transform", newMatrix);
        currentX = evt.clientX;
        currentY = evt.clientY;
    }
    function deselectElement(evt){
        if(selectedElement != 0){
            selectedElement.removeAttributeNS(null, "onmousemove");
            selectedElement.removeAttributeNS(null, "onmouseout");
            selectedElement.removeAttributeNS(null, "onmouseup");
            selectedElement = 0;
        }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    function selectElement(evt) {
        selectedElement = evt.target;
        currentX = evt.clientX;
        currentY = evt.clientY;
        currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');

        for(var i=0; i<currentMatrix.length; i++) {
            currentMatrix[i] = parseFloat(currentMatrix[i]);
        }

        selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
        selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
        selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    }
    function moveElement(evt){
        dx = evt.clientX - currentX;
        dy = evt.clientY - currentY;
        currentMatrix[4] += dx;
        currentMatrix[5] += dy;
        newMatrix = "matrix(" + currentMatrix.join(' ') + ")";

        selectedElement.setAttributeNS(null, "transform", newMatrix);
        currentX = evt.clientX;
        currentY = evt.clientY;
    }
    function deselectElement(evt){
        if(selectedElement != 0){
            selectedElement.removeAttributeNS(null, "onmousemove");
            selectedElement.removeAttributeNS(null, "onmouseout");
            selectedElement.removeAttributeNS(null, "onmouseup");
            selectedElement = 0;
        }
    }

3.鼠标滚轮放大缩小图片事件： onmousewheel

onmousewheel="return bigimg(this)

复制代码

1
2
3
4
5
6
7
8
function bigimg(i)
    {
        var zoom = parseInt(i.style.zoom,10)||100;
        zoom += event.wheelDelta / 12;
        if(zoom > 0 )
            i.style.zoom=zoom+'%';
        return false;
    }

4.在svg中跳转到另一个页面

5.对svg图片进行渐变渲染：

复制代码

1
2
3
4
5
6
<defs>
   <linearGradient id="color" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ffffaa;stop-opacity:1"/>
      <stop offset="100%" style="stop-color:#ffb5b5;stop-opacity:1"/>
   </linearGradient>
</defs>

以上几种效果都是我在近期项目中遇到的，查阅了好多，才得到解决，希望大家多提出意见。