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 ”）

要使用view getBBox()方法计算viewBox的值。在这种情况下，您可以尝试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>

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

2 个答案: