'stroke-dashoffset'のSVGテキストFirefoxでCSSアニメーションが機能しない

Question

次のアニメーションはChromeとOperaでは正常に動作しますが、Mozilla Firefoxでは動作しません。なぜ私は理解できません。

問題を解決するのに手伝ってもらえますか？私のCSSで何が間違っていますか？

#text-logo { 
 
    font-family: 'Shrikhand', cursive; 
 
    stroke-dashoffset: 100%; 
 
    stroke-dasharray: 100%; 
 
    -moz-animation: draw 8s forwards ease-in; 
 
    -webkit-animation: draw 8s forwards ease-in; 
 
    animation: draw 8s forwards ease-in; 
 
    background-clip: text; 
 
} 
 

 
@keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<div class="draw_text"> 
 
    <svg width="1092" height="220"> 
 
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text> 
 
    </svg> 
 
</div>

Answer 1

設定stroke-dashoffset: 100%は、きちんとしたもののように見えますが、何の100％？ canonical definitionは：

パーセンテージが使用される場合、値は現在のビューポートのパーセンテージを表し...

…パーセンテージはsqrt((actual-width)**2 + (actual-height)**2))/sqrt(2)の特定の割合として計算されます。

Firefoxはそれを実装していないようです。 px長さを設定すると、それが動作します：

#text-logo { 
 
    font-family: 'Shrikhand', cursive; 
 
    stroke-dashoffset: 1114px; 
 
    stroke-dasharray: 1114px; 
 
    -moz-animation: draw 8s forwards ease-in; 
 
    -webkit-animation: draw 8s forwards ease-in; 
 
    animation: draw 8s forwards ease-in; 
 
    background-clip: text; 
 
} 
 

 
@keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@-webkit-keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 

 
@-moz-keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<div class="draw_text"> 
 
    <svg width="1092" height="220"> 
 
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text> 
 
    </svg> 
 
</div>

Answer 2

単位ベースはパーセント単位で、その後アニメーション値があまりにもパーセンテージでなければなりませんので、もしFirefoxで一致させる必要があります。

-moz-animationや-moz-keyframesなどのようなものはありません。プレフィックスが適用されていないバージョンの前にプレフィックス付きアニメーションを配置する必要があります。私はあまりにも下にそれを修正しました。

#text-logo { 
 
    font-family: 'Shrikhand', cursive; 
 
    stroke-dashoffset: 100%; 
 
    stroke-dasharray: 100%; 
 
    -webkit-animation: draw 8s forwards ease-in; 
 
    animation: draw 8s forwards ease-in; 
 
    background-clip: text; 
 
} 
 

 
@-webkit-keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0%; 
 
    } 
 

 
@keyframes draw { 
 
    100% { 
 
    stroke-dashoffset: 0%; 
 
    } 
 
} 
 

 
}

<div class="draw_text"> 
 
    <svg width="1092" height="220"> 
 
    <text x="150" y="200" fill="#fff" stroke="#333" id="text-logo" stroke-width="2" font-size="95">WHO I AM ?</text> 
 
    </svg> 
 
</div>