如何在嵌套 SVG 中设置参考点？

Question

我想更改 SVG 中的参考点。我在另一个 SVG 中有一个嵌套的 SVG。我希望参考点在中间。

html,body {
 height:100%;
 margin:0;
}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
      <g>
        <svg x="30" y="200" style="width:100%;height:100%">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
        </svg>
</g>
</svg>

目前，内部 SVG 在左上角有一个点。变量 X 和 Y 指定到该点的距离。

Answer 1

我给你的嵌套 svg 一个 viewBox 属性。这会将您的绘图放在主 svg 的中心。接下来，我将所有内容包装在 <g> 元素中并翻译它 transform="translate(5.5, 75.5)"。请注意，5.5 是半宽（viewBox = "0 0 11 151"），75.5 是半高（viewBox = "0 0 11 151"）

为了计算 viewBox 的值，我使用了 getBBox() 方法。这种情况你可以试试console.log(inner.getBBox())。

svg{border:1px solid}
html,body{height:100vh}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50%" cy="50%" r="5" fill="red" />
      <g>
        <svg viewBox = "0 0 11 151"  style="width:100%;height:100%" >
          <g id="inner" transform="translate(5.5, 75.5)">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
          </g>
        </svg>
</g>
</svg>

红点标志着主 svg 的中心。

Answer 2

您可以在 g 上应用平移以将参考点移动到中间：

html,
body {
  height: 100%;
  margin: 0;
  background: linear-gradient(red, red) center/10px 10px no-repeat;/*the middle*/
}

g {
  transform: translate(50%, 50%);
}

svg {
  display: block
}

<svg style="width:100%;height:100%" xmlns="http://www.w3.org/2000/svg">
      <g>
        <svg x="0" y="0" style="width:100%;height:100%">
          <rect x="3" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="0" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="0" y="71" width="11" height="9" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="3" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="7" y="83" width="1" height="68" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="4" y="61" width="3" height="30" style="stroke-width:0.5;stroke:black;fill:none" />
          <rect x="1.5" y="60" width="8" height="1" style="stroke-width:0.5;stroke:black;fill:none" />
        </svg>
</g>
</svg>