SVG图片无法在Safari中呈现

mikasa 发表于 Dev

三ka

<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的回答，我发现您需要在图像标签的“ height / width”属性中显式设置高度和宽度，以便在Safari中显示图像。现在，如果高度/宽度假定为“自动”，我会遇到另一个问题，从图像标签中删除属性在Chrome中有效，但图像在Safari中又消失了。有没有解决办法？

罗伯特·朗森

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。