第 13 章 添加交互

在 SVG 中使用链接

最简单的方式是：使用 <a> 元素实现

控制 CSS 动画

与普通的 CSS 动画一样

用户触发的 SMIL 动画

在 SVG 中使用 SMIL 动画元素，可以为 begin 和 end 属性使用另一种格式的值，以便响应用户操作

这种可以响应交互式动画时间属性的格式就是 elementID.eventName。通过 ID 引用的元素 并不一定是正在进行动画的元素

利用 SMIL 的 begin 和 end 属性进行交互的国产是基于事件的：一旦动画开始，它就会进行下去，直到完成动画或者动画终止事件发生（和 DOM 事件处理动画类似）

• 设置了按钮
• 将图形的 begin 设置为 button.click

<!-- @format -->

<svg>
    <g id="button">
        <rect
            x="10"
            y="10"
            width="40"
            height="20"
            rx="4"
            ry="4"
            style="fill: #ddd"
        />
        <text x="30" y="25" style="text-anchor: middle; font-size: 8pt">
            Start
        </text>
    </g>
    <g transform="translate(100, 60)">
        <path
            d="M-25 -15, 0 -15, 25 15, -25 15 Z"
            style="stroke: gray; fill: #699"
        >
            <animateTransform
                id="trapezoid"
                attributeName="transform"
                type="rotate"
                from="0"
                to="360"
                begin="button.click"
                dur="6s"
            />
        </path>
    </g>
</svg>

使用脚本控制 SVG

与普通的 JavaScript 一样