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()" />