喜欢吗？

Question

我在将内嵌SVG封装在div中时遇到问题。我以前使用过嵌套的SVG，现在却被告知必须对嵌入式SVG使用嵌套的div。

基本上，我需要将SVG调整为“容器”的大小-“容器”的大小应与浏览器窗口的大小相同。

有关在尝试整个div之前有效的示例：

仅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，宽度，高度等。

这是我尝试过的最新内容：

包裹在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中的所有内容都没有改变。

关于如何获得“以div包裹”策略以匹配“纯SVG”策略的任何建议？

更清晰： 我想我想说的是，相对于“容器”的尺寸，“背景”形状需要为1000w x 500h。它的任何一个孩子都必须绝对位于1000w 500h内并相对于它定位。 “容器”大小是可用空间。因此，如果浏览器窗口为3000w x 2000h，那么从技术上讲，“背景”形状应为3000w x 1500h（子形状也将相应地调整大小-但保持在其原始相对位置-相对于1000w x 500h）。如果将窗口800w乘以600h，则“背景”和子形状会相对缩小。就像SVG示例一样。

以上面的SVG示例，将其另存为html文件，在本地启动以及上下调整浏览器大小可能会有所帮助。这就是我要寻求的帮助，但是div似乎并不知道如何处理。

Answer 1

DIV元素上的SVG的 viewBox 属性没有真正的等效项。最接近的将转换比例。因此，如果您为div容器指定了特定的像素大小，而又没有调整调整大小，那么您将略微覆盖 viewbox 计算。

话虽如此，如果您的div容器使用窗口调整了大小，则它可以工作。同样，使用最少的JavaScript，您可以获得与 viewbox 相同的结果。

对于仅css解决方案，您定义div容器，使其为窗口大小的100％。 SVG 视图框随后仍在进行计算。您需要定义一个 preserveAspectRatio ，使其行为与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可以是相对的，而没有位置信息。调整大小后，您可以根据 innerWidth 调整比例。像这样：

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>

Answer 2

喜欢吗？

Current Thread : main
Current Thread (SupplyAsync) : ForkJoinPool.commonPool-worker-1
Current Thread (ThenApplyAsync) : ForkJoinPool.commonPool-worker-1
CompletableFuture Result : RESULT

编辑：更改了代码段。

此版本使用<html> <body> <div class="container" style="width:100%; height:100%;"> <div class="container" style="width:100%; height:100%;"> <svg id="container" style="position:relative;border:dashed;width:100%;height:100%;" viewBox="0 0 1000 500"> <rect width="100%" height="100%" stroke="lime" fill="blue" stroke-width="10" /> <foreignObject x="275" y="50" width="371px" height="378px"> <div class="container" style="width:100%; height:100%;"> <svg id="shape" name="Triangle" x="0" y="0" fill="red" stroke="yellow" stroke-width="3" width="100%" height="100%"> <path d="M0,378L185,0L371,378Z" /> </svg> </div> </foreignObject> </svg> </div> </div> </body> </html>用div元素包装内部svg。结果是预期的。

如果您尝试这样的事情：

<foreignObject>

然后，您需要将div彼此叠加，并且您无法进一步操作svg

Answer 3

我想我得到了您想要的东西，但这是两个不同的svg，而不是相同的矢量图像。

我用div包装两个svg，并使用绝对位置将其覆盖第二个div。

<html>
<body>
    <div id="containerouter" style="position:relative;border:dashed;width:100%;height:100%;margin:0;">
        <div id="background" style="position:relative;width:100%;height:100%;">
            <svg name="Box" viewBox="0 0 1000 500">
                <rect width="1000" height="500" stroke="lime" fill="blue" stroke-width="10" />
            </svg>
        </div>
        <div id="shape" style="position:absolute;height:100%; width:auto;left:175px;top:10%;">
            <svg name="Triangle" viewBox="0 0 371 378" fill="red" stroke="yellow" stroke-width="3" x="0" y="0" height="75%">
                <path d="M0,378L185,0L371,378Z" />
            </svg>
        </div>
    </div>
</body>
</html>

调整包裹在div中的div中包裹的svg的大小

3 个答案:

喜欢吗？