SVG_33_script脚本标签

知识点：

script标签：一个SVG脚本元素等同于HTML中的script元素，因此这个位置是面向脚本的（例如，ECMAScript）。

任何定义在script元素中的函数拥有一个跨当前文档的全局范围。

本来我还想着，使用脚本控制的话，会更灵活。呐，今天script标签就来了。

使用script标签，我们就可以编写各种脚本，实现各种点击、滑动等高交互性的操作了。

其实之前把svg写在html文档中也是可以的，但我更喜欢单独.svg格式。

以后更多的交互效果，期待。

SVG代码效果被吞，gif奉上，简单的交互操作。

原理：

1，绿色圆：点击之后改变了圆的x轴坐标和半径。

2，方变圆：使用animate动画控制rx属性，当rx值等于正方形边长一半时，就变成了圆形了。（ry默认与rx保持一致，如果单独设置，可以变成椭圆形等）

关键代码

<svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg">
  <script type="text/javascript">
    // <![CDATA[
    function change(evt) {
      var target = evt.target;
      var radius = target.getAttribute("r");

      if (radius == 15) {
        radius = 45;
      } else {
        radius = 15;
      }

      target.setAttribute("r",radius);
   }
   // ]]>
</script>

  <circle cx="50" cy="50" r="45" fill="green"
          onclick="change(evt)" />
</svg>

 

Xi说孔方兄认证