SVG 图像无法在 Safari 中呈现

Question

<svg id="button-svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 40 40" xml:space="preserve">\n        <defs>\n          <pattern id="pattern1" height="100%" width="100%">\n            <filter id="shadow">\n              <feDropShadow dx="0" dy="0" stdDeviation="2.2" />\n            </filter>\n            <rect height="100%" width="100%" fill=${backgroundColor}></rect>\n            <image id="image" xlink:href=${backgroundImage}></image>\n          </pattern>\n        </defs> \n        <circle id="circle" cx="20" cy="20" r="20" filter="url(#shadow)"  fill="url(#pattern1)"/>\n      </svg>\n

\n\n

我已经尝试了 stackoverflow 上的多种解决方案，但似乎都不起作用。有人可以帮我解决这个问题吗？

\n\n

注意：过滤器和填充颜色都会显示。它只是\xe2\x80\x99s 缺少的图像。

\n\n

演示：https://codesandbox.io/s/svg-safari-image-t9ng3? file=/src/index.js

\n\n

编辑：感谢 Robert Longson 的回答，我发现您需要在图像标签“height/width”属性中显式设置高度和宽度，以便图像在 Safari 中显示。现在我有另一个问题，如果高度/宽度应该是“自动”，从图像标签中删除该属性在 Chrome 中有效，但图像在 Safari 中再次消失。有什么解决办法吗？

\n

Answer 1

Safari 需要图像具有高度和宽度值。

使用图像的原生宽度和高度，即默认值 auto 是新 SVG 2 规范中的更改。Firefox 和 Chrome 已经实现了这一点，我想 Safari 在某个时候也会实现这一点。