SVG 剪辑路径动画在 Firefox 上不起作用
Posted
技术标签:
【中文标题】SVG 剪辑路径动画在 Firefox 上不起作用【英文标题】：SVG clippath animation not working on Firefox 【发布时间】：2019-09-03 21:11:15 【问题描述】：我正在研究 SVG 动画。完成了那个开发部分。它适用于 Chrome，但不适用于 Firefox。我认为 1clippath 标签路径内部没有占用高度和宽度。这是link 的实时示例。
我在下面附上了 html 和 SCSS sn-ps。请看一下。
HTML 代码
<svg viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
<path x="150" y="0" transform= translate(-100%)
d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"></path>
<path x="150" y="0" transform= translate(-100%)
d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
<path x="150" y="0" transform= translate(-100%)
d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>
</clipPath>
</defs>
<g id="Page-1" stroke="none" stroke- fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape"
transform="translate(-245.000000, -440.000000)">
<g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0"
></rect>
<text id="Increase-in-attacks"
font-size="15"
font-weight="bold" line-spacing="22" fill="#009FDB">
<tspan x="42" y="40">Increase in attacks in 2018</tspan>
</text>
<text id="Ransomware-attacks"
font-size="11"
font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="68.462" y="83">Ransomware </tspan>
<tspan x="96.765" y="97">attacks</tspan>
</text>
<text id="Spear-phishing-attac"
font-size="11"
font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="58.199" y="167">Spear-phishing </tspan>
<tspan x="96.765" y="181">attacks</tspan>
</text>
<text id="Spoofing/BEC-attacks"
font-size="11"
font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="83.301" y="125">Spoofing/</tspan>
<tspan x="74.27" y="139">BEC attacks</tspan>
</text>
<path clip-path="url(#clip-path-increaseinattacks)"
d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"></path>
<path clip-path="url(#clip-path-increaseinattacks)"
d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
<path clip-path="url(#clip-path-increaseinattacks)"
d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>
<path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919"
stroke-linecap="square" fill-rule="nonzero"></path>
<text id="350%"
font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="90">350%</tspan>
</text>
<text id="250%"
font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="132">250%</tspan>
</text>
<text id="70%"
font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="174">70%</tspan>
</text>
</g>
</g>
</g>
</svg>
SCSS 代码
@mixin delayAnim()
$duration: .3s;
&:nth-child(1)
animation-delay: 0 * $duration;
&:nth-child(2)
animation-delay: 1 * $duration;
&:nth-child(3)
animation-delay: 2 * $duration;
&:nth-child(4)
animation-delay: 3 * $duration;
&:nth-child(5)
animation-delay: 4 * $duration;
&:nth-child(6)
animation-delay: 5 * $duration;
&:nth-child(7)
animation-delay: 6 * $duration;
&:nth-child(8)
animation-delay: 7 * $duration;
&:nth-child(9)
animation-delay: 8 * $duration;
@keyframes drawinx
0%
transform: translateX(-100%);
100%
transform: translateX(0);
#clip-path-increaseinattacks.active
& path
animation: drawinx 1s ease-in;
animation-fill-mode: forwards;
@include delayAnim();
谢谢！
【问题讨论】：
使用 SMIL 而不是 CSS 动画。 @RobertLongson 你能给我一个上面提供的 SVG 的例子吗 感谢罗伯特·朗森。很快就会抓住你 @RobertLongson，仅供参考 问题已更新 【参考方案1】：这就是我使用 SMIL 动画的方式：
我将fill="freeze" 用于animation-fill-mode: forwards; 和calcMode="spline"
keySplines= ".4,0,.78,.69"
而不是ease-in
<svg viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
<clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
<path x="150" y="0" transform= translate(-505,0)
d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero">
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0s"
calcMode="spline"
keySplines= ".4,0,.78,.69"
dur="0.3s"
fill="freeze"/>
</path>
<path x="150" y="0" transform = translate(-505,0)
d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero">
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0.3s"
calcMode="spline"
keySplines= ".4,0,.78,.69"
dur="0.3s"
fill="freeze"/>
</path>
<path x="150" y="0" transform= translate(-505,0)
d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero">
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="-505,0; 0,0"
begin="0.6s"
calcMode="spline"
keySplines= ".4,0,.78,.69"
dur="0.3s"
fill="freeze"/>
</path>
</clipPath>
</defs>
<g id="Page-1" stroke="none" stroke- fill="none" fill-rule="evenodd">
<g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
<g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
<rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" ></rect>
<text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22" fill="#009FDB">
<tspan x="42" y="40">Increase in attacks in 2018</tspan>
</text>
<text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="68.462" y="83">Ransomware </tspan>
<tspan x="96.765" y="97">attacks</tspan>
</text>
<text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="58.199" y="167">Spear-phishing</tspan>
<tspan x="96.765" y="181">attacks</tspan>
</text>
<text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
<tspan x="83.301" y="125">Spoofing/</tspan>
<tspan x="74.27" y="139">BEC attacks</tspan>
</text>
<path clip-path="url(#clip-path-increaseinattacks)" id="kk"
d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"> </path>
<path clip-path="url(#clip-path-increaseinattacks)"
d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
<path clip-path="url(#clip-path-increaseinattacks)"
d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>
<path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square" fill-rule="nonzero"></path>
<text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="90">350%</tspan>
</text>
<text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="132">250%</tspan>
</text>
<text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
<tspan x="159" y="174">70%</tspan>
</text>
</g>
</g>
</g>
</svg>【讨论】：
@enxaneta，感谢您的回答，但在 IE11 中图表不呈现（在 IE11 中图表将呈现没有动画也可以。） @PavanKumarIdapalapati 使用fakeSmile 获得对 SMIL 的 IE 支持，但您的问题是关于 Firefox，而不是 IE。 感谢@RobertLongson。添加了Fakesmile js。工作正常！ @enxaneta，我们能否更改begin 属性，使其仅在某些事件（例如在其自身添加了类似的类名之后）才进行动画处理？
@SaiUnique 如果您还有其他问题，建议您单独提问。以上是关于SVG 剪辑路径动画在 Firefox 上不起作用的主要内容，如果未能解决你的问题，请参考以下文章
为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用？