从代码去知道SVG(二)

怎么运用SVG制作交互式图形

您能够运用SVG的交互功用来创立交互式图形。这些功用答应您在图形上增加事情监听器，以便在用户与图形交互时履行特定的操作。

例如，您能够运用onclick特点来增加一个鼠标单击事情监听器。当用户单击图形时，将履行指定的JavaScript代码。

下面是一个简略的示例，演示怎么运用onclick特点来创立一个交互式图形：

<svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" fill="red" onclick="changeColor(evt)"/>
</svg>
<script>
    function changeColor(evt) {
        var rect = evt.target;
        rect.setAttribute("fill", "green");
    }
</script>

在上面的代码中，咱们创立了一个矩形，并为其增加了一个onclick特点。当用户单击矩形时，将调用changeColor函数。在此函数中，咱们运用setAttribute方法来更改矩形的填充色彩。

这里有一个简略的交互式SVG图形示例，它运用onclick特点来增加一个鼠标单击事情监听器：

<svg width="100" height="100">
    <rect x="10" y="10" width="80" height="80" fill="red" onclick="changeColor(evt)"/>
</svg>
<script>
    function changeColor(evt) {
        var rect = evt.target;
        var color = rect.getAttribute("fill") === "red" ? "green" : "red";
        rect.setAttribute("fill", color);
    }
</script>

在上面的代码中，咱们创立了一个矩形，并为其增加了一个onclick特点。当用户单击矩形时，将调用changeColor函数。在此函数中，咱们运用setAttribute方法来更改矩形的填充色彩。

要运用SVG制作更杂乱的交互式图形，您能够运用多个事情监听器并将它们组合在一起。例如，您能够运用onclick、onmouseover和onmouseout特点来增加鼠标单击、悬停和离开事情监听器。

此外，您还能够运用JavaScript来动态更改图形的特点和内容。这能够让您更容易的创立杂乱的交互式图形。

下面是一个简略的示例，演示怎么运用多个事情监听器和JavaScript来创立一个杂乱的交互式图形：

<svg width="200" height="200">
    <rect id="myRect" x="10" y="10" width="80" height="80" fill="red"
          onclick="changeColor()" onmouseover="grow()" onmouseout="shrink()"/>
</svg>
<script>
    function changeColor() {
        var rect = document.getElementById("myRect");
        var color = rect.getAttribute("fill") === "red" ? "green" : "red";
        rect.setAttribute("fill", color);
    }
    function grow() {
        var rect = document.getElementById("myRect");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "100");
    }
    function shrink() {
        var rect = document.getElementById("myRect");
        rect.setAttribute("width", "80");
        rect.setAttribute("height", "80");
    }
</script>

在上面的代码中，咱们创立了一个矩形，并为其增加了多个事情监听器。当用户单击矩形时，将调用changeColor函数；当用户将鼠标悬停在矩形上时，将调用grow函数；当用户将鼠标移开矩形时，将调用shrink函数。在这些函数中，咱们运用setAttribute方法来动态更改矩形的特点。

这里有一个更杂乱的交互式SVG图形示例，它运用多个事情监听器和JavaScript来创立一个杂乱的动画序列：

<svg width="200" height="200">
    <rect id="myRect" x="10" y="10" width="80" height="80" fill="red"
          onclick="changeColor()" onmouseover="grow()" onmouseout="shrink()"/>
    <circle id="myCircle" cx="150" cy="50" r="40" fill="#ff00ff"
            onclick="changeColor()" onmouseover="grow()" onmouseout="shrink()"/>
</svg>
<script>
    function changeColor() {
        var rect = document.getElementById("myRect");
        var circle = document.getElementById("myCircle");
        var color = rect.getAttribute("fill") === "red" ? "green" : "red";
        rect.setAttribute("fill", color);
        circle.setAttribute("fill", color);
    }
    function grow() {
        var rect = document.getElementById("myRect");
        var circle = document.getElementById("myCircle");
        rect.setAttribute("width", "100");
        rect.setAttribute("height", "100");
        circle.setAttribute("r", "50");
    }
    function shrink() {
        var rect = document.getElementById("myRect");
        var circle = document.getElementById("myCircle");
        rect.setAttribute("width", "80");
        rect.setAttribute("height", "80");
        circle.setAttribute("r", "40");
    }
</script>

在上面的代码中，咱们创立了一个矩形和一个圆形，并为它们增加了多个事情监听器。当用户单击图形时，将调用changeColor函数；当用户将鼠标悬停在图形上时，将调用grow函数；当用户将鼠标移开图形时，将调用shrink函数。在这些函数中，咱们运用setAttribute方法来动态更改图形的特点。

总结

上面这些示例都介绍了在html中怎么运用script创立一些SVG改变，您能够测验运行这些代码并查看效果。