CSS“d"路径 - 属性在 Safari、FireFox 中不起作用 [英] CSS "d" path - attribute doesn't work in Safari, FireFox

问题描述

我想将 CSS 动画用于 SVG 路径的属性d".这个例子在谷歌浏览器中工作:

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

body {
  background-color: #022040;
}

#path {
  d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  stroke: #1EFE64;
  fill: none;
  animation-name: path;
  animation-duration: 5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}


@keyframes path {

  0% {
     d: path('M425,225 L475,275');
  }

  25% {
     d: path('M425,225 L475,275 L575,175 L575,175 L575,175 L575,175 L575,175');
  }
  
  50% {
     d: path('M425,225 L475,275 L575,175 L675,275 L675,275 L675,275 L675,275'); 
  }
  
  75% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L775,175 L775,175'); 
  }
  
  90% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L875,275'); 
  }
  
  100% {
     d: path('M425,225 L475,275 L575,175 L675,275 L775,175 L875,275 L925,225'); 
  }
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="400">
<path id="path" stroke-width="20"/>
</svg>

但不适用于 Safari PC/Mobile 和 FireFox.

But doesn't work in Safari Pc/Mobile and FireFox.

如何修复错误?或者我应该在 svg 中使用标签animate"?

How to fix the bug? Or should I use the tag "animate" in svg?

请帮帮我)谢谢！

推荐答案

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

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.

相关问题跟踪页面:

• Bugzilla@Mozilla 错误 1383650
• Microsoft Edge 开发问题 11543103
• 单轨列车问题 652822

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

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 是 ease-in animation-timing-function 属性关键字的三次贝塞尔值集，定义在CSS 计时函数，级别 1 规范:https://drafts.c​​sswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in.

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.

这篇关于CSS“d"路径 - 属性在 Safari、FireFox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！