svg的深入学习（二）

svg的继续探讨与研究

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

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

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

例如，在svg的rect中：

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

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;
        }
    }

  onmousewheel="return bigimg(this)

function bigimg(i)
    {
        var zoom = parseInt(i.style.zoom,10)||100;
        zoom += event.wheelDelta / 12;
        if(zoom > 0 )
            i.style.zoom=zoom+'%';
        return false;
    }

  <a xlink:href="xxx.html">

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

<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>

最后

以上就是昏睡山水为你收集整理的svg的深入学习（二）的全部内容，希望文章能够帮你解决svg的深入学习（二）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。