CSS 过渡动画无法在 SVG 路径的“d”属性变化时生效。

Question

CSS 过渡动画无法在 SVG 路径的“d”属性变化时生效。

htmlcssanimationsvg

7

jsFiddle

我试图对SVG的各个元素应用CSS过渡效果。对于圆形，transition: all 2s效果很好，但对于路径则不起作用。

是否有比“all”更具体的选项？

编辑：

下面的链接提供了有关动画SVG线条或路径的更多信息...似乎目前还无法使用CSS过渡效果实现...

您可以在SVG属性上使用CSS过渡效果吗？像线条上的y2一样？

- jk-kim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Holger Will · Accepted Answer

过渡只能应用于演示属性，以及一些其他属性，例如x、y、cx、cy等。可以在此处找到支持的属性列表。不幸的是，d不在其中...

由于这仍然无法在各种浏览器中可靠地支持，因此您可以使用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>