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”不工作属性变化

回答

相关问题