CSS "d" path - Safari、FireFoxで属性が機能しない

Question

属性 "d"にSVGパスのCSSアニメーションを使用します。 グーグルクロームで作業この例：

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で動作しません。

バグを修正するにはどうすればよいですか？ または、svgで「animate」タグを使用する必要がありますか？

お願いします） ありがとうございました！

Answer 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" 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仕様で定義されているease-inanimation-timing-functionプロパティキーワードのキュービックベジェ値のセットです。https://drafts.csswg.org/css-timing-1/#valdef-cubic-bezier-timing-function-ease-inです。