SVG 脚本

简单脚本示例

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle1" cx="50" cy="50" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Radius" onclick="changeRadius()" />

<script>
  function changeRadius() {
    document.getElementById("circle1").setAttribute("r", "50");
  }
</script>

修改 CSS

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle2" cx="50" cy="50" r="25" style="fill:red;" />
  Sorry, your browser does not support inline SVG.
</svg>

<input type="button" value="Change Style" onclick="changeStyle()" />

<script>
  function changeStyle() {
    document.getElementById("circle2").style.fill = "green";
  }
</script>

修改属性和css

<svg width="200" height="120" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle3" cx="50" cy="60" r="25" style="fill:red;" />
</svg>

<input type="button" value="Change Circle" onclick="changeMe()" />

<script>
  function changeMe() {
    var c = document.getElementById("circle3");
    c.setAttribute("r", "50");
    c.setAttribute("cx", "150");
    c.style.fill = "green";
    c.style.stroke = "red";
  }
</script>

通过脚本实现动画

<svg width="600" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle id="circle4" cx="50" cy="50" r="50" style="fill:red;" />
</svg>

<script>
  var t = null;

  function start() {
    if (t == null) {
      t = setInterval(animate, 20);
    }
  }

  function stop() {
    if (t != null) {
      clearInterval(t);
      t = null;
    }
  }

  function animate() {
    var circle = document.getElementById("circle4");
    var cx = circle.getAttribute("cx");
    var newCX = 2 + parseInt(cx);
    if (newCX > 600) {
      newCX = 50;
    }
    circle.setAttribute("cx", newCX);
  }
</script>

<br />
<input type="button" value="Start" onclick="start()" />
<input type="button" value="Stop" onclick="stop()" />