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說孔方兄認證