Question

我尝试使用＆＃34; img＆＃34;来尝试引用SVG文件标记：

<img width="200" height="100"
     src="test.svg" 
     onerror="this.onerror = null; alert('error');"
     />

一般来说，这有效，但如果＆＃34; test.svg＆＃34;有嵌入的.jpg图像，然后图像不呈现。在Chrome和Firefox中也是如此 - IE确实正确渲染图像。奇怪的是，如果我加载＆＃34; test.svg＆＃34;直接在浏览器中，嵌入的图像在每个浏览器上正确呈现。

这是＆＃34; test.svg＆＃34;的一个例子。这表明了我的意思：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="100">

    <!-- Text and shapes always render correctly -->
    <text x="20" y="20" font-size="20">some text</text>
    <ellipse ry="30" rx="30" 
             cy="50" cx="50" 
             stroke-width="5" stroke="#000000" 
             fill="#FF0000" 
             />

    <!-- Embedded images render in IE, but not in Chrome or Firefox -->
    <image xlink:href="test.jpg"
           width="100" height="100"
           x="100" />
</svg>

我还没有找到明确的答案。这是Webkit中的错误吗？

Answer 1

通过<img>标记嵌入的任何SVG图像都必须是自包含的。

，不会加载任何外部参考，例如图像，字体或CSS文件

这里解释了原因：https://bugzilla.mozilla.org/show_bug.cgi?id=628747

FF和webkit已经做出了这一改变。我猜IE还没有。

Answer 2

您可以使用带有可选后备选项的<object>标签来更好地处理svg。这是您可以做的-

<object width="200" height="100" data='test.svg' onerror="this.onerror = null; alert('error');">
    <!-- fallback -->
    <img width="200" height="100" src="test.svg" onerror="this.onerror = null; alert('error');" />
</object>

在此处， ，您的对象标签将以第一优先级加载；如果由于某种原因失败，则会加载后备标签。在这种情况下，我已将您的原始img写为备用。

IE确实如此，但Chrome / Firefox不会在“img”元素中呈现SVG嵌入图像

2 个答案: