Question

我有一个SVG图像，我想将其作为单独的文件保存到我的主html文件中。我试图使其作为嵌入标记工作，但有不同的视图框行为的问题。下面是我想要的代码。视图框占用尽可能多的空间而不会溢出窗口

<!DOCTYPE html>

<body style="overflow:hidden; margin:0" bgcolor="#E6E6FA">

    <div>
         <!-- <embed src="example.svg" type="image/svg+xml" /> -->
        <svg 
            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
            xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            xmlns:cc="http://creativecommons.org/ns#"
            xmlns:dc="http://purl.org/dc/elements/1.1/"
            viewBox="0 0 400 600">

            <g stroke-width="2">
                <rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
                <rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
                <rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
            </g>
        </svg>
    </div>

</body>

当我用引用这个完全相同的文本的embed标签替换它时。视图填充宽度，以便溢出窗口的垂直尺寸。

Answer 1

我找到了答案。通过从width属性移动到在style属性中设置宽度，问题得以解决。 html文件包含一个div并嵌入样式集宽度。

<body style="overflow:none; margin:0" bgcolor="#E6E6FA">
    <div style="height:100%">
        <embed src="example.svg" type="image/svg+xml" style="height:100%;width:100%"/>
    </div>
</body>

SVG文件包含视图框

<svg 
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
viewBox="0 0 400 600">

<g stroke-width="2">
    <rect height="600" width="400" stroke="#FF0" y="0" x="0" fill="#808080"/>
    <rect height="80" width="100" stroke="#808080" y="80" x="40" fill="#F60"/>
    <rect height="120" width="160" stroke="#808080" y="250" x="160" fill="#FC0" onclick="alert('one')"/>
</g>

缩小窗口时仍有一些奇怪的行为（当宽度随高度变化时，它只能正确调整大小）所以如果有人有更好的答案，我会热衷于听到它

内联vs嵌入式svg的不同Viewbox行为

1 个答案: