SVG：<use>，javascript和動畫

所以我有一個簡單的嵌入式SVG圖像。我使用的是JavaScript的beginElement()以提示特定部件的動畫：SVG：<use>，javascript和動畫

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
    <script> 
     jQuery(function(){ $('path').mouseover(function(){ $('animateTransform', this)[0].beginElement(); }); }); 
    </script> 
    </head> 
    <body> 
    <svg 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="400" 
     height="400" 
    > 
     <g transform="translate(200,200)" stroke="black"> 
     <g> 
     <g transform="rotate(0)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(24)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(48)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(72)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(96)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(120)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(144)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(168)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(192)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(216)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(240)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(264)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(288)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="red"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(312)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="green"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     <g transform="rotate(336)"> 
      <path d="M 0 0 L 100 0 A 1 1 0 0 1 91.35454576426008 40.67366430758001 Z" fill="blue"> 
      <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0" /> 
      </path> 
     </g> 
     </g> 
     </g> 
    </svg> 
    </body> 
</html>

圖像本身是相當重複的 - 我可以把它簡化了很多與<use>標籤：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
    <path id="plume" d="M 0 0 L -20.791169081775931 97.81476007338057 A 2 2 0 0 0 20.791169081775931 97.81476007338057 Z" > 
     <animateTransform begin="indefinite" attributeType="XML" attributeName="transform" type="scale" dur="7s" values="1.0;1.33;1.0;0.75;1.0"/> 
    </path> 
    <g id="fifth"> 
     <g transform="rotate(0.0)"> 
     <use xlink:href="#plume" fill="red"/> 
     </g> 
     <g transform="rotate(24.0)"> 
     <use xlink:href="#plume" fill="green"/> 
     </g> 
     <g transform="rotate(48.0)"> 
     <use xlink:href="#plume" fill="blue"/> 
     </g> 
    </g> 
    </defs> 
    <g transform="translate(200,200)" stroke="black"> 
    <use xlink:href="#fifth" transform="rotate(0.0)"/> 
    <use xlink:href="#fifth" transform="rotate(72.0)"/> 
    <use xlink:href="#fifth" transform="rotate(144.0)"/> 
    <use xlink:href="#fifth" transform="rotate(216.0)"/> 
    <use xlink:href="#fifth" transform="rotate(288.0)"/> 
    </g> 
</svg>

但後來我可以」因爲它們不可見，所以不再爲單個<path>元素註冊鼠標懸停事件。現在，<use>元素獲取鼠標懸停事件。因爲他們都在重複使用相同的路徑，所以如果我提示該動畫，那麼所有元素都會生成動畫。

有沒有什麼辦法可以將第二個表示的簡潔性與第一個表示的個體動畫性融爲一體？

來源

2012-01-03 rampion

蠻力方法是用腳本生成SVG代碼。

可能更優雅的是有兩條路徑 - 一條靜態和一條動畫，並在需要時通過Javascript更改href屬性。

來源

2012-01-03 15:31:55 zch

是的，它看起來像svg一代通過JavaScript是目前最好的解決方案。 – rampion 2012-01-04 19:53:11

SVG：<use>，javascript和動畫

回答

相關問題