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>

我尝试了 Whosebug 的多种解决方案，但 none 似乎有效。有人可以帮我解决这个问题吗？

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

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

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

Answer 1

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

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

SVG 图像未在 Safari 中呈现

SVG images not rendering in Safari

html

css

safari

svg

svg-filters