将整个 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

实际上，您无法让您的元素在水平和垂直方向都适合 window，因为这不是适合 window 的完美形状，所以你只需要在水平和垂直健身之间做出选择。只要您想使用 window resize 来调整元素的大小，您就应该考虑根据宽度水平调整元素。 要完成这项工作，您不需要任何具有 width 和 height 规范的父包装器，您还应该从您的 width 和 height 属性中删除svg 元素也会自动填充可用的 space （它将填充父容器，在本例中它是 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>

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

Fitting whole svg in a resizable div

html

css

svg

resize