CSS "d" 路径 - 属性在 Safari、FireFox 中不起作用

Posted 2023-03-06

【中文标题】CSS "d" 路径 - 属性在 Safari、FireFox 中不起作用

【英文标题】：CSS "d" path - attribute doesn't work in Safari, FireFox

【发布时间】：2018-03-09 07:25:28

【问题描述】：

我想为 SVG 路径的属性“d”使用 CSS 动画。 此示例在 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"  >
<path id="path" stroke-/>
</svg>

但在 Safari Pc/Mobile 和 FireFox 中不起作用。

如何修复错误？ 还是应该在 svg 中使用标签“animate”？

请帮帮我） 谢谢！

【问题讨论】：

这些浏览器只支持 d 作为属性，不支持 CSS。如果你想支持它们，你可以在 SMIL 中重做动画。

【参考方案1】：

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

相关问题跟踪页面：

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

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

<svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 1000 1000">
    <title>Path Animation</title>
    <path fill="none" stroke="hsl(139, 99%, 56%)" stroke->
        <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.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-in。