SVG <set>標記的dur屬性不生成

我試圖使用SVG <set>標記對動畫進行動畫翻轉，但即使指定了dur =「1s」，轉換也是即時的（在Firefox，Safari，Opera和Chrome中）。SVG <set>標記的dur屬性不生成

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <set attributeType="CSS" attributeName="fill" to="green" begin="mouseover" end="mouseout" dur="1s" /> 
    </circle> 
</svg> 

</body> 
</html>

我能做到，我想用兩個<animate>標籤的效果，但我希望能夠以應用可能，我想保留不同的初始顏色過渡到多個元素（此方法需要我指定第二個動畫標籤中的初始顏色爲「紅色」）。

<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
     <animate attributeType="CSS" attributeName="fill" to="green" begin="mouseover" dur="1s" fill="freeze" /> 
     <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
    </circle> 
</svg> 

</body> 
</html>

在第一代碼段的<set>標籤保留了初始顏色，但過渡不顯示動畫。如果我對w3規範的理解是正確的，那應該是 - 這看起來像是一個特定於瀏覽器的錯誤，還是我誤解了w3規範？有沒有更好的方法來解決這個問題？

來源

2012-04-09 yasashiku

攝製情況：http://jsfiddle.net/4xx5p/（這是在Safari以及Firefox的真） – Phrogz 2012-04-10 00:59:59

感謝您驗證它不會在Safari工作，要麼;我剛剛在Opera和Chrome中進行了測試，我也在那裏得到了相同的行爲。 – yasashiku 2012-04-10 03:55:33

如SVG 1.1 Specification描述：

的「設置」元件提供的一個簡單的裝置只設置屬性的指定的持續時間的值。
...
to = "<value>"在'set'元素的持續期間指定屬性的值。

（重點煤礦。）

正如你所看到的，<set>元素的duration是不是一個過渡時間，但效果相當多長時間才能被應用。如果您刪除end屬性，您將看到顏色從紅色變爲綠色，持續1秒and then revert爲原始值。

有關更多詳細信息，請閱讀SMIL Specification中的<set>元素。

編輯：下面是使用自定義數據來註釋SVG元素，並使用該數據來創建你想要的<animate>元素，基於元素的填充一次性執行的腳本的例子。您可以查看這個例子住在http://phrogz.net/svg/change-color-on-hover.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:y="yasashiku" viewBox="0 0 240 150"> 
    <title>Change Color on Hover</title> 
    <style> 
    circle { stroke:black; stroke-width:2px } 
    circle:not([fill]) { fill:purple } 
    </style> 
    <circle cx="50" cy="50" r="40" fill="red" y:hoverAnimFillTo="blue" y:hoverAnimDur="0.3s" /> 
    <circle cx="100" cy="100" r="40" fill="red" y:hoverAnimFillTo="green" y:hoverAnimDur="1s" /> 
    <circle cx="150" cy="42" r="40" fill="orange" y:hoverAnimFillTo="yellow" /> 
    <circle cx="200" cy="100" r="40"    y:hoverAnimFillTo="steelblue" /> 
    <script> 
    var els = document.getElementsByTagName('*'), 
     y = 'yasashiku'; 
    for (var i=els.length;i--;){ 
     var fillColor = els[i].getAttributeNS(y,'hoverAnimFillTo'); 
     if (fillColor){ 
     var dur = els[i].getAttributeNS(y,'hoverAnimDur') || '0.1s'; 
     createOn(els[i],'animate',{ 
      begin:'mouseover', 
      attributeType:'CSS', attributeName:'fill', 
      to:fillColor, 
      dur:dur, fill:'freeze' 
     }); 
     createOn(els[i],'animate',{ 
      begin:'mouseout', 
      attributeType:'CSS', attributeName:'fill', 
      to:els[i].getAttribute('fill') || computedStyle(els[i],'fill'), 
      dur:dur, fill:'freeze' 
     }); 
     } 
    } 
    function createOn(el,name,attrs){ 
     var e = el.appendChild(document.createElementNS(el.namespaceURI,name)); 
     for (var name in attrs) e.setAttribute(name,attrs[name]); 
     return e; 
    } 
    function computedStyle(el,name){ 
     return document.defaultView.getComputedStyle(el,null)[name]; 
    } 
    </script> 
</svg>

來源

2012-04-10 04:05:40 Phrogz

謝謝;關於如何在沒有初始顏色的先驗知識的情況下恢復原狀的想法？ – yasashiku 2012-04-10 04:08:29

@yasashiku個人而言，我只是JS要麼控制顏色，要麼（更簡單）根據屬性動態地創建''元素。如果這是你的一個選擇（如果JS可用），你需要幫助，我可以修改我的答案的細節。 – Phrogz 2012-04-10 12:09:26

...不要說，我已經創建了一個例子，並且無論如何編輯了這個問題。希望這有助於。 – Phrogz 2012-04-10 12:39:26

使用「價值觀」和「KeyTimes」屬性？

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"> 
 
    <animate attributeType="CSS" attributeName="fill" values="red;green;green;red" keyTimes="0;0.2;0.8;1" begin="mouseover" dur="2s" fill="freeze" /> 
 
    <animate attributeType="CSS" attributeName="fill" to="red" begin="mouseout" dur="1s" fill="freeze"/> 
 
    </circle> 
 
</svg>

來源

2014-11-12 09:35:01

SVG <set>標記的dur屬性不生成

回答

相關問題