我在覆盖要包装在 div 中的内联 SVG 时遇到问题。我之前使用过嵌套 SVG，现在我被告知必须使用带有内联 SVG 的嵌套 div。
基本上，我需要将 SVG 的大小调整为“容器”——“容器”的大小与浏览器窗口一致。
在我尝试整个 div 之前的一个例子:
SVG Only 示例 - 完美运行
<html>
<body>
<svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500">
<svg id="background" name="Box" x="0" y="0">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
<svg id="shape" name="Triangle" x="275" y="50" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</svg>
</body>
</html>但是当我尝试将 div 包裹在它们周围时，无论我尝试过什么，它都保持与我的 viewBox 相同的大小。我在 SO 和其他地方对此进行了很多查找，但似乎没有任何效果:填充技巧、100vw、宽度、高度等。
这是我尝试过的最新版本:
包含在 DIV 示例中的 SVG - 行为不一样
<html>
<body>
<div id="container" style="position:relative;border:dashed;width:100%;height:0;margin:5px">
<div id="background" style="position:absolute;left:0px;top:0px;width:1000px;height:500px;">
<svg name="Box" viewBox="0 0 1000 500">
<rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:275px;top:50px;width:371px;height:378px;">
<svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>
</div>
</body>
</html>我放了一个“边框:虚线；”在第一个 div 中，只是为了确保它使用浏览器窗口调整大小，并且确实如此。只是那个 div 里面的所有东西都没有改变。
关于如何获得“包装在 div”策略以匹配“普通 SVG”策略的任何建议？
更清晰:
我想我要说的是相对于“容器”大小，“背景”形状需要为 1000w x 500h。它的任何 child 都需要绝对定位在 1000w 500h 内并相对于它。 “容器”大小是可用空间。因此，如果浏览器窗口是 3000w x 2000h，那么从技术上讲，“背景”形状应该是 3000w x 1500h(并且子形状也相应地调整大小 - 但保持其原始相对位置 - 相对于 1000w x 500h)。如果窗口 800 w x 600 h，“背景”和子形状会相对缩小以适应它。就像 SVG 示例一样。
采用上面的 SVG 示例，将其另存为 html 文件，在本地启动并上下调整浏览器的大小可能会有所帮助。这就是我要寻求帮助的，但 div 似乎不知道如何处理这个问题。
最佳答案
没有真正的等价物 View 框 SVG 在 DIV 元素上的属性。最接近的是 变换比例 .所以如果你给你的 div 容器一个特定的像素大小而不调整大小，你将在某种程度上覆盖 视窗计算。
话虽如此，如果您的 div 容器随窗口调整大小，则它可以工作。同样使用最少的 javascript，您可以获得与 相同的结果视窗 .
对于仅使用 css 的解决方案，您定义 div 容器，使其 100% 为窗口大小。 SVG 视窗然后仍在进行计算。您需要定义一个 保留纵横比 与您的 SVG 示例具有相同的行为。像这样:
html, body {
width: 100%;
height: 100%;
padding: 0px;
margin:0px;
}
* {
box-sizing: border-box;
}<div id="container" style="position:relative;border:dashed;width:100%;height:100%;">
<svg name="Box" style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;left:0px;top:0px;height:100%;width:100%;">
<svg style="position:relative;width:100%;height:100%;" viewBox="0 0 1000 500" preserveAspectRatio="xMinYMin">
<svg id="shape" name="Triangle" x="275" y="50" width="371" height="378" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</svg>
</div>
</div>对于 javascript 解决方案，您在 div 容器上定义大小，然后您的 svg 可以是相对的并且没有定位信息。在调整大小时，您可以根据 调整比例。内宽 .像这样:
window.onload = window.onresize = calculateScale
function calculateScale() {
var scaleFactor = innerWidth / 1000;
document.getElementById('container').style.transform = `scale(${scaleFactor})`
}html,
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
* {
box-sizing: border-box;
}<div id="container" style="position:absolute;border:dashed;width:1000px;height:500px;transform-origin: left top">
<svg name="Box" style="position:relative;width:100%;height:100%;">
<rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" />
</svg>
<div id="shape" style="position:absolute;width: 371px;height: 378px;top: 50px;left: 275px;">
<svg style="width: 100%; height: 100%" id="shape" name="Triangle" fill="red" stroke="yellow" stroke-width="3">
<path d="M0,378L185,0L371,378Z" />
</svg>
</div>
</div>关于html - 调整包裹在 div 中的 svg 的大小，即包裹在 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58422304/