我有一个相当不寻常的 svg 动画，使用
<feImage><feComposite><use>我在 Chrome 中一切正常，但在 Firefox 和 Safari 中发现了不同的行为。
Firefox 根本不会渲染过滤后的元素，从我在线搜索来看，原因似乎是 Firefox 不支持 feImage 标签中的碎片 svg 元素。然而，即使我尝试用 1) 实际 svg 文件的完整链接和 2) data-URI（这是来自许多来源的建议）替换它，仍然没有显示任何内容。
在 Safari 中，过滤后的 svg 元素（叶子形状）在缩放时会变得模糊，并且挖空元素（圆孔）的位置会关闭。看来我可以通过更改变换原点坐标来纠正定位问题。然而，这会扰乱 Chrome 的原始渲染。我还没有发现太多关于模糊的问题。
下面是完整的 svg 代码以及 codepen 的链接：https://codepen.io/lanlanoneearth/pen/vYBJopM
非常感谢一些专业知识的帮助！
<svg id="bf-icon__prey-predator"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 135.21 180.5">
<defs>
<title>Porter-Duff Composite: Out</title>
<path id="leaf" class="cls-31" d="M69,1.69,67.61,0,66.18,1.69c-.16.19-16.69,19.72-33,43.86C11.17,78.16,0,103.23,0,120.07c0,19.22,6.9,35,20,45.61,11.91,9.7,28.39,14.82,47.66,14.82s35.75-5.12,47.66-14.82c13-10.61,19.94-26.39,19.94-45.61C135.21,80.15,71.74,4.87,69,1.69ZM3.75,120.07a52.1,52.1,0,0,1,2.09-13.6l59.74,46.32v18.29L3.83,123.2C3.79,122.17,3.75,121.13,3.75,120.07Zm65.58,28.59V129l53.6-39.8a123.76,123.76,0,0,1,5.4,13.76Zm0-24.37V107.46l45.39-34.35c2.37,4.22,4.59,8.44,6.59,12.59Zm0-21.54V84.48l35.81-27.31c2.65,4.16,5.24,8.4,7.7,12.65Zm0-23V63.08l.15.2L96.1,43.57c2.33,3.38,4.68,6.87,7,10.44Zm0-21V40.05l15.34-12.4c2.94,4,6.08,8.28,9.28,12.84Zm0-23.49V7.93c2.9,3.56,7.57,9.4,13.09,16.72Zm-3.75.06L52.66,24.84c5.39-7.15,10-12.92,12.92-16.54Zm0,4.83v18L41.43,40.25c3.1-4.4,6.13-8.57,9-12.41Zm0,45.51v16.52L22.52,69.56c2.24-3.85,4.58-7.69,7-11.46Zm0,21.22v17.46L13.82,85.88c2.07-4.3,4.37-8.67,6.83-13Zm0,22.13V148L7,102.62A125.48,125.48,0,0,1,12.2,89.35Zm3.75,42.72V153.41l60.14-46.62a52.32,52.32,0,0,1,2,13.28c0,1.2,0,2.38-.08,3.54l-24.46,19Zm-30-128.37L65.58,62.8V80.91l-34.06-26C34.09,51,36.7,47.07,39.29,43.33ZM4.21,128.25l61.37,47.57v.9C37.43,176.12,8.17,163,4.21,128.25Zm65.12,48.47v-.27l39.89-30.92,21.72-16.84C126.78,163.21,97.46,176.22,69.33,176.72Z"/>
<circle id="porter-duff-out" class="cls-32" cx="67.61" cy="136.66" r="40.05"/>
<filter id="pd-out"
x="0" y="0">
<feImage xlink:href="#leaf"
result="source"/>
<feImage xlink:href="#porter-duff-out"
result="destination"/>
<feComposite operator="out"
in="source"
in2="destination"/>
</filter>
<style>
.cls-31 {
fill: #010101;
}
.cls-32 {
fill: #fff;
}
@keyframes up-and-down {
0% {
transform: translateY(0px) rotate(0deg);
}
40% {
transform: translateY(-65px) rotate(0deg);
}
50% {
transform: translateY(-65px) rotate(180deg);
}
90% {
transform: translateY(0px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
@keyframes wing-flap-left {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-9deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wing-flap-right {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(9deg);
}
100% {
transform: rotate(0deg);
}
}
#beatle, #porter-duff-out {
animation-name: up-and-down;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#wing-left {
animation-name: wing-flap-left;
animation-duration: 400ms;
animation-iteration-count: infinite;
}
#wing-right {
animation-name: wing-flap-right;
animation-duration: 400ms;
animation-iteration-count: infinite;
}
#wing-left, #wing-right, #beatle, #porter-duff-out {
transform-origin: 67.607px 136.662px;
}
</style>
</defs>
<title>bf-icon__prey-predator</title>
<use xlink:href="#leaf" filter="url(#pd-out)"></use>
<g id="beatle">
<path id="wing-left" d="M33,131.18a35.05,35.05,0,0,0,29.14,40.11L73.1,102A35.06,35.06,0,0,0,33,131.18Zm24.34,22.66A5.63,5.63,0,1,1,51.92,148,5.62,5.62,0,0,1,57.33,153.84Zm-3-19.2a7.72,7.72,0,1,1-7.42-8A7.71,7.71,0,0,1,54.28,134.64ZM63,117.81A5.63,5.63,0,1,1,57.63,112,5.63,5.63,0,0,1,63,117.81Z"/>
<path id="wing-right" d="M62.12,102l11,69.25a35.06,35.06,0,0,0-11-69.25ZM83.3,148a5.63,5.63,0,1,1-5.42,5.84A5.62,5.62,0,0,1,83.3,148Zm5-21.37a7.72,7.72,0,1,1-7.42,8A7.72,7.72,0,0,1,88.35,126.63ZM77.59,112a5.63,5.63,0,1,1-5.41,5.84A5.64,5.64,0,0,1,77.59,112Z"/>
</g>
</svg>
此外，这是叶元素的外部 svg 文件，当通过我自己的存储库将其放入代码中时（http://lanlanoneearth.github.io/porter-duff/bf-icon__prey-predator--test-animated）。 svg），显示在 Chrome（模糊）和 Safari（不模糊）中，而不是 Firefox 中。尽管相同的代码在 codepen 中没有呈现任何内容 (https://codepen.io/lanlanonearth/pen/QWLMeXv)。
<feImage xlink:href="http://lanlanonearth.github.io/porter-duff/bf-icon-data__prey-predator--leaf.svg" result="source"/>
<rect id="test" width="100%" height="100%" filter="url(#pd-out)"/>
这是从 Yoksel 的 SVG 编码器编码的数据 URI 版本 (https://yoksel.github.io/url-encoder/)。 data-URI 叶元素显示在 Chrome (https://codepen.io/lanlanoneearth/pen/LYPzZyx) 的 codepen 中，而不是 Safari 或 Firefox。
<feImage xlink:href="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='leaf' fill='%23000000' d='M69,1.69,67.61,0,66.18,1.69c-.16.19-16.69,19.72-33,43.86C11.17,78.16,0,103.23,0,120.07c0,19.22,6.9,35,20,45.61,11.91,9.7,28.39,14.82,47.66,14.82s35.75-5.12,47.66-14.82c13-10.61,19.94-26.39,19.94-45.61C135.21,80.15,71.74,4.87,69,1.69ZM3.75,120.07a52.1,52.1,0,0,1,2.09-13.6l59.74,46.32v18.29L3.83,123.2C3.79,122.17,3.75,121.13,3.75,120.07Zm65.58,28.59V129l53.6-39.8a123.76,123.76,0,0,1,5.4,13.76Zm0-24.37V107.46l45.39-34.35c2.37,4.22,4.59,8.44,6.59,12.59Zm0-21.54V84.48l35.81-27.31c2.65,4.16,5.24,8.4,7.7,12.65Zm0-23V63.08l.15.2L96.1,43.57c2.33,3.38,4.68,6.87,7,10.44Zm0-21V40.05l15.34-12.4c2.94,4,6.08,8.28,9.28,12.84Zm0-23.49V7.93c2.9,3.56,7.57,9.4,13.09,16.72Zm-3.75.06L52.66,24.84c5.39-7.15,10-12.92,12.92-16.54Zm0,4.83v18L41.43,40.25c3.1-4.4,6.13-8.57,9-12.41Zm0,45.51v16.52L22.52,69.56c2.24-3.85,4.58-7.69,7-11.46Zm0,21.22v17.46L13.82,85.88c2.07-4.3,4.37-8.67,6.83-13Zm0,22.13V148L7,102.62A125.48,125.48,0,0,1,12.2,89.35Zm3.75,42.72V153.41l60.14-46.62a52.32,52.32,0,0,1,2,13.28c0,1.2,0,2.38-.08,3.54l-24.46,19Zm-30-128.37L65.58,62.8V80.91l-34.06-26C34.09,51,36.7,47.07,39.29,43.33ZM4.21,128.25l61.37,47.57v.9C37.43,176.12,8.17,163,4.21,128.25Zm65.12,48.47v-.27l39.89-30.92,21.72-16.84C126.78,163.21,97.46,176.22,69.33,176.72Z'/%3E%3C/svg%3E"
当前版本的 Firefox 将在问题中显示 SVG。
在版本 123 之前，Firefox 要求 feImage 元素引用的图像不仅是完整的，即不是片段，而且还要求 图像具有非百分比的宽度和高度属性。非百分比限制现已修复。