svg的深入学习（二）

最新推荐文章于 2025-02-26 10:27:57 发布

原创

最新推荐文章于 2025-02-26 10:27:57 发布 · 634 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨SVG图形与JavaScript的结合应用，详细介绍了如何利用mouseover、mouseout事件处理鼠标移入移出，onmousedown事件实现图片移动，以及如何通过onmousewheel事件进行图片缩放。同时，文章还提及了SVG图片的渐变渲染技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

svg的继续探讨与研究

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

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

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

例如，在svg的rect中：

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

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

2.图片移动事件：onmousedown

在svg的rect中：onmousedown="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.se