调整包裹在div中的div中包裹的svg的大小 [英] resize svg wrapped in div that is wrapped in div
问题描述
我在将内嵌SVG封装在div中时遇到问题.我以前使用过嵌套的SVG，现在却被告知必须对内联SVG使用嵌套的div.
I'm having a problem coverting inline SVG to be wrapped in divs. I was using nested SVGs before and now I'm told I have to use nested divs with inline SVG.
基本上，我需要将SVG调整为容器"的大小-容器"的大小应与浏览器窗口的大小相同.
Basically, I need the SVG to be sized to the "container" - the "container" is size to the browser window.
举一个在尝试整个div之前有效的示例:
For an example of what works before I tried the whole div thing:
仅SVG示例-完美运行
<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，宽度，高度等.
But when I try to wrap divs around them, it just stays the same size as my viewBox, no matter what I've tried. I've looked up a lot on this on SO and elsewhere and nothing seems to work: padding tricks, 100vw, width, height, etc.
这是我尝试过的最新内容:
Here's the latest of what I've tried:
包裹在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>我把"border:dashed;"在第一个div中，只是要确保它与浏览窗口的大小相同.只是该div中的所有内容都没有改变.
I put a "border:dashed;" in the first div, just to make sure it is resizing with the browswer window and it is. It's just that everything inside that div doesn't change.
关于如何获得以div包裹"策略以匹配纯SVG"策略的任何建议吗?
Any advice on how to get the "wrapped in div" strategy to match the "plain SVG" strategy?
更清晰:我想我想说的是，相对于容器"的大小，背景"形状需要为1000w x 500h.它的任何一个孩子都必须绝对位于1000w 500h内并相对于它定位.容器"大小是可用空间.因此，如果浏览器窗口为3000w x 2000h，则从技术上讲，背景"形状应为3000w x 1500h(子形状也将相应地调整大小-但保持在其原始相对位置-相对于1000w x 500h).如果窗口800 w乘以600 h，则背景"和子形状会相对缩小.就像SVG的例子一样.
More clarity: I guess what I'm saying is that "background" shape needs to be 1000w x 500h, relative to the "container" size. Any of it's children need to be absolutely positioned inside of that 1000w 500h and relative to it. The "container" size is the available space. So if if the browser window is 3000w x 2000h, then technically the "background" shape should be 3000w x 1500h (and the child shapes resize accordingly too - but the stay in their original relative position - relative to 1000w x 500h). If the window 800 w by 600 h, the "background" and child shapes shrink to fit that, relatively. Just like the SVG example.
以上面的SVG示例，将其另存为html文件，在本地启动以及上下调整浏览器大小可能会有所帮助.这就是我要寻求的帮助，但是div似乎不知道该如何处理.
It might be helpful to take the SVG example above, save it as an html file, launch locally and resize your browser up and down. That's what I'm to find help with, but divs don't seem to know how to handle this.
推荐答案
在DIV元素上，SVG的 viewBox 属性没有真正的等效项.最接近的将转换比例.因此，如果您为div容器指定了特定的像素大小，而不调整调整大小，则您将略微覆盖 viewbox 计算.
There's no real equivalent to viewBox property of SVG on DIV elements. The closest one would transform scale. So if you give your div containers a specific size in pixel without adjusting on resize, you're going to somewhat override the viewbox calculations.
话虽这么说，如果您的div容器使用窗口调整了大小，那么它就可以工作.同样，使用最少的JavaScript，您可以获得与 viewbox 相同的结果.
That being said, if your div containers are resized with the window, then it can work. Also with minimal javascript you can get the same result as viewbox.
对于仅css解决方案，您定义div容器，使其为窗口大小的100％.然后，SVG 视图框仍在进行计算.您需要定义一个 preserveAspectRatio ，使其行为与SVG示例相同.像这样:
For the css only solution, you define your div containers so they are 100% the size of the window. The SVG viewbox is then still making the calculations. You'll need to define a preserveAspectRatio to have the same behavior as your SVG example. Like this:
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可以是相对的，而没有位置信息.调整大小后，您可以根据 innerWidth 调整比例.像这样:
For the javascript solution, you define the size on your div containers, and your svg can then be relative and not have the positioning info. And on resize you adjust the scale based on the innerWidth. Like this:
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>这篇关于调整包裹在div中的div中包裹的svg的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
