13.3 User Triggered SMIL Animations


Example
Start
<svg width="200" height="100"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="button">
    <rect x="10" y="10" width="40" height="20" rx="4" ry="4"
      style="fill: #ddd;"/>
    <text x="30" y="23"
      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>