CSS過渡動畫的SVG路徑的「d」不工作屬性變化

我嘗試應用CSS轉換爲SVG各種元素。transition: all 2s爲圓的偉大工程，但它不爲路徑工作。

如何有更多的東西具體然後「所有」

編輯：？

以下鏈接有多個信息SVG動畫線條或路徑...這似乎是不可能的CSS尚未轉型...

Can you use CSS transitions on SVG attributes? Like y2 on a line?

2015-09-23 codingtwinky

轉換隻能應用於演示屬性，以及一些其他屬性，如X，Y，CX，CY ... 支持的屬性列表可以在這裏找到http://dev.w3.org/SVG/proposals/css-animation/animation-proposal.html 不幸的是d ISN其中之一...

因爲這仍然不支持可靠跨瀏覽器，您可以使用SMIL動畫來實現相同的結果。

var type = true; 
 

 
setInterval(function() { 
 
    $("#path").attr('from', type ? "M 0 0 L 50 100" : "M 0 0 L 100 50"); 
 
    $("#path").attr('to', type ? "M 0 0 L 100 50" : "M 0 0 L 50 100"); 
 
    $("#path")[0].beginElement() 
 
    $("#circle").attr('from', type ? "40" : "10"); 
 
    $("#circle").attr('to', type ? "10" : "40"); 
 
    $("#circle")[0].beginElement() 
 
    type = !type; 
 
}, 1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg> 
 
    <path stroke="#000000" stroke-width="5" d="M 0 0 L 100 50" > 
 
     <animate id="path" attributeName="d" from="M 0 0 L 100 50" to="M 0 0 L 50 100" dur="1s" fill="freeze"/> 
 
    </path> 
 
    <circle fill="#0000FF" cx="10" cy="50" r="10" > 
 
     <animate id="circle" attributeName="cx" from="10" to="40" dur="1s" fill="freeze"/> 
 
    </circle> 
 
</svg>

對我的方式重構我的所有代碼使用`SVG

來源

2015-09-23 02:38:08

：line'，而不是'SVG：path' ......媽...... – codingtwinky

https://jsfiddle.net/ rnhu7673/4 /更改爲行，儘管x2和y2在文檔中，但它不生成動畫。 – codingtwinky

你是對的，鏈接的網站是一個提案，並不是所有的屬性都支持到處。例如，你的小提琴在firefox中根本不起作用。最安全的方式是在過渡不起作用的情況下使用SMIL ... –

CSS過渡動畫的SVG路徑的「d」不工作屬性變化

回答

相關問題