从代码去认识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>

要使用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变化，您可以尝试运行这些代码并查看效果。