1

我有一个 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>

当我将其替换为引用此完全相同文本的嵌入标记时。视图框填充宽度，以便溢出窗口的垂直尺寸。

4

1 回答 1

0

我已经得出了答案。通过从宽度属性移动到在样式属性中设置宽度，问题得到解决。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>

缩小窗口时仍然存在一些奇怪的行为（只有在宽度随高度变化时才会正确调整大小）所以如果有人有更好的答案，我会很想听到它

于 2013-06-26T09:32:55.693 回答