Question

我想将属性“d”的CSS动画用于SVG路径。此示例使用Google Chrome：

Reduce

do.call

但在Safari Pc / Mobile和FireFox中无效。

如何修复错误？或者我应该在svg中使用“animate”标签吗？

请帮帮我）谢谢！

Answer 1

d是在https://svgwg.org/svg2-draft/paths.html#TheDProperty的SVG 2规范中定义的SVG“几何属性”。 Google Chrome的Blink布局引擎是唯一支持此属性的布局引擎，其实现与当前的规范定义不匹配。

相关问题追踪页面：

而且，是的，您可以使用SVG animate元素实现相同的效果：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 1000">
    <title>Path Animation</title>
    <path fill="none" stroke="hsl(139, 99%, 56%)" stroke-width="20">
        <animate attributeName="d" values="
            M 425 225 L 475 275;
            M 425 225 L 475 275 L 575 175 L 575 175 L 575 175 L 575 175 L 575 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 675 275 L 675 275 L 675 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 775 175 L 775 175;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 875 275;
            M 425 225 L 475 275 L 575 175 L 675 275 L 775 175 L 875 275 L 925 225
        " keyTimes="0; 0.25; 0.5; 0.75; 0.9; 1" calcMode="spline" keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" dur="5s" fill="freeze"/>
    </path>
</svg>

0.42 0 1 1是CSS时序函数级别1规范https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in中定义的ease-in animation-timing-function属性关键字的三次Bézier值集。

CSS“d”路径 - 属性在Safari，FireFox中不起作用

1 个答案: