gpt4 book ai didi

css - 内联与嵌入式 svg 的不同 Viewbox 行为

转载 作者:太空宇宙 更新时间:2023-11-03 18:42:14 25 4
gpt4 key购买 nike

我有一个 SVG 图像,我想将它作为一个单独的文件保存到我的主 html 文件中。我试图让它作为嵌入标签工作,但在不同的 View 框行为方面存在问题。下面是我想要的代码。 viewbox在不溢出窗口的情况下尽可能多的占用空间

<!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>

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

最佳答案

我已经找到答案了。通过从宽度属性移动到在样式属性中设置宽度,问题得到解决。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 文件包含 View 框

<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>

缩小窗口时仍然有一些奇怪的行为(只有当宽度随高度改变时它才会正确调整大小)所以如果有人有更好的答案我很想听听

关于css - 内联与嵌入式 svg 的不同 Viewbox 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17300051/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com