html - 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">
        <defs>
          <pattern id="pattern1" height="100%" width="100%">
            <filter id="shadow">
              <feDropShadow dx="0" dy="0" stdDeviation="2.2" />
            </filter>
            <rect height="100%" width="100%" fill=${backgroundColor}></rect>
            <image id="image" xlink:href=${backgroundImage}></image>
          </pattern>
        </defs> 
        <circle id="circle" cx="20" cy="20" r="20" filter="url(#shadow)"  fill="url(#pattern1)"/>
      </svg>

我已经尝试了 stackoverflow 的多种解决方案，但似乎都没有奏效。有人可以帮我吗？

注意:过滤器和填充颜色都显示。只是缺少图像。

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

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

Answer 1

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

使用图像的原始宽度和高度，即 auto 的默认值是 change in the new SVG 2 specification . Firefox 和 Chrome 已经实现了这一点，我想 Safari 也会在某个时候实现。