将整个 svg 放入可调整大小的 div

Question

我已经尝试了一段时间来寻找解决方案，但它毫无价值，因为我不太了解 svg 和 html :( 这是行为：https://i.stack.imgur.com/vHuJH.gif 我希望 svg 始终适合可调整大小的 div。它适用于高度但不适用于宽度...... 这是html：

<div id="parent" style="height:200px; width:200px;"><!--!-->
<div style="height:100%; width:100%; overflow:hidden"><!--!-->
<!--!-->            <div style="text-align:center;display:flex; height:inherit"><!--!-->
                <!--!--><svg id="svgzonecorrelogram" style="height:100%;width:100%" viewBox="0 0 500 600" preserveAspectRatio="xMinYMin meet"><text x="221" y="221" fill="grey" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1<title>1</title></text><text x="221" y="463" fill="#383838" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1,00</text><circle cx="463" cy="221" r="116" fill="#000080"></circle><text x="463" y="463" fill="grey" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1<title>1</title></text><rect x="100" y="100" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; "><title>1,00</title></rect><rect x="342" y="100" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; "><title>1,00</title></rect><rect x="100" y="342" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; "><title>1,00</title></rect><rect x="342" y="342" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; "><title>1,00</title></rect><linearGradient id="lingrad" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="Navy"></stop><stop offset="50%" stop-color="#E5E4E2"></stop><stop offset="100%" stop-color="FireBrick"></stop></linearGradient><rect x="605" y="100" width="20" height="485" style="stroke: lightgray;stroke - width: 1px;" fill="url(#lingrad)"></rect><text x="635" y="105" font-size="22">1.0</text><text x="635" y="342" font-size="22">0.0</text><text x="630" y="590" font-size="22">-1.0</text><text x="95" y="221" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle">...fgdfgdfg<title>test1fffffffffffffffffffffffgdfgdfgdfgdfg</title></text><text x="221" y="95" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle" transform="rotate(90,221,97)">...fgdfgdfg<title>test1fffffffffffffffffffffffgdfgdfgdfgdfg</title></text><text x="95" y="463" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle">test2<title>test2</title></text><text x="463" y="95" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle" transform="rotate(90,463,97)">test2<title>test2</title></text></svg><!--!-->
            </div><!--!-->
        </div>
                </div>

我希望我的完整 svg 对于“父”div 的任何宽度和高度都具有正确的比例

提前致谢

日痕

Answer 1

实际上，你不能让你的元素水平和垂直都适合窗口，因为这不是适合窗口的完美形状，所以你只需要在水平和垂直适应之间进行选择。只要您想通过调整窗口大小来调整元素的大小，您就应该考虑将其水平调整为其宽度。 要完成这项工作，您不需要任何具有width 和height 规范的父包装器，您还应该从svg 元素中删除width 和height 属性，因为它会自动填充可用空间 （它将填充父容器，在这种情况下它是window 本身）。所以你只需要修改你的viewBox属性，因为viewBox代表min-x，min-y，width和height你只需要知道你的确切图像大小，你可以忽略前两个属性。

最后的样子如下：

<svg id="svgzonecorrelogram" viewBox="0 0 670 610" preserveAspectRatio="xMinYMin meet"><text x="221" y="221" fill="grey" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1<title>1</title></text><text x="221" y="463" fill="#383838" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1,00</text>
  <circle cx="463" cy="221" r="116" fill="#000080"></circle><text x="463" y="463" fill="grey" font-size="18" font-weight="bold" text-anchor="middle" dominant-baseline="middle">1<title>1</title></text>
  <rect x="100" y="100" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; ">
    <title>1,00</title>
  </rect>
  <rect x="342" y="100" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; ">
    <title>1,00</title>
  </rect>
  <rect x="100" y="342" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; ">
    <title>1,00</title>
  </rect>
  <rect x="342" y="342" width="242" height="242" style="stroke: lightgray;stroke - width: 1px; fill: transparent; ">
    <title>1,00</title>
  </rect>
  <linearGradient id="lingrad" x1="0" x2="0" y1="0" y2="1">
    <stop offset="0%" stop-color="Navy"></stop>
    <stop offset="50%" stop-color="#E5E4E2"></stop>
    <stop offset="100%" stop-color="FireBrick"></stop>
  </linearGradient>
  <rect x="605" y="100" width="20" height="485" style="stroke: lightgray;stroke - width: 1px;" fill="url(#lingrad)"></rect><text x="635" y="105" font-size="22">1.0</text><text x="635" y="342" font-size="22">0.0</text><text x="630" y="590" font-size="22">-1.0</text><text x="95" y="221" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle">...fgdfgdfg<title>test1fffffffffffffffffffffffgdfgdfgdfgdfg</title></text><text x="221" y="95" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle" transform="rotate(90,221,97)">...fgdfgdfg<title>test1fffffffffffffffffffffffgdfgdfgdfgdfg</title></text><text x="95" y="463" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle">test2<title>test2</title></text><text x="463" y="95" fill="grey" font-size="18" font-weight="bold" text-anchor="end" dominant-baseline="middle" transform="rotate(90,463,97)">test2<title>test2</title></text>
</svg>