CSS “d” path - attribute doesn't work in Safari, FireFox

Question

I want use CSS animation for attribute \"d\" to SVG path. This example working in Google chrome:

相关标签:

Answer 1

d is an SVG “Geometry Property” defined in the SVG 2 specification at https://svgwg.org/svg2-draft/paths.html#TheDProperty. Google Chrome’s Blink layout engine is the only layout engine to support this property and its implementation doesn’t match the current specification definition.

Relevant Issue Tracker Pages:

• Bugzilla@Mozilla Bug 1383650
• Microsoft Edge Development Issue 11543103
• Monorail Issue 652822

And, yes, you can achieve the same effect using the SVG animate element:

<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 is the set of cubic Bézier values for the ease-in animation-timing-function property keyword as defined in the CSS Timing Functions, Level 1 specification: https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in.