Question

html中的2 commenter:Ben type:issue显示了不同的结果？使用相同的SVG代码，但第一个在<div>元素内引用，其中第二个内联声明。

HTML

<object>

SVG与名为test.svg

的文件中的html相同的文件夹

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>SVG Inline Issue</title>
</head>
<body>
SVG inside &lt;object&gt;
<div>
<object type="image/svg+xml" data="test.svg">My Image</object>
</div>
SVG inline
<div>
<svg height="600" width="600">
    <g>
        <circle cx="100" cy="100" r="20" fill="yellow"></circle>
        <text x="100" y="100"> Hello World</text>
    </g>
</svg>
</div>
</body>
</html>

结果页面如下所示 search

Answer 1

当您从外部引用SVG时，SVG将作为html文件加载。您必须在独立的SVG文件上放置有效的命名空间，以便浏览器可以识别您的标记确实是SVG。所以你想要的是

<svg xmlns="http://www.w3.org/2000/svg" height="600" width="600">
    <g>
        <circle cx="100" cy="100" r="20" fill="yellow"></circle>
        <text x="100" y="100"> Hello World</text>
    </g>
</svg>

如果您通过网络服务器加载页面，则需要确保mime类型正确。

SVG内联工作但只在<object>中加载时显示<text>内容

1 个答案: