Question

我在另一个SVG中有一个SVG，但是内部SVG正在裁剪。

如果我检查元素，则检查器将显示正确大小的矩形：

我一直在尝试更改内部SVG上的viewBox，但没有任何乐趣。有一种可以正确显示它的技术吗？

.canvas{
  background: #000000;
}

<svg width="136" height="200" viewBox="0 0 136 200" class="canvas">
  <g id="grid">
    <line x1="16" x2="112" y1="16" y2="16" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="16" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="48" x2="48" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="80" x2="80" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="112" x2="112" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="48" y2="48" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="80" y2="80" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="112" y2="112" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="144" y2="144" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="176" y2="176" stroke="rgba(255,255,255,0.3)"></line>
  </g>
  <g id="items">
    <svg width="32" height="32" x="32" y="64" style="transform: rotate(90deg);">
      <g>
        <g>
          <rect x="20" y="20" width="24" height="24" fill="#683C34" class=""></rect>
        </g>
        <g>
          <rect x="20" y="28" width="24" height="4" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="24" y="20" width="4" height="12" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="36" y="20" width="4" height="8" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="20" y="32" width="24" height="4" fill="#FFDA70" class=""></rect>
        </g>
        <g>
          <rect x="24" y="36" width="4" height="8" fill="#FFDA70" class=""></rect>
        </g>
        <g>
          <rect x="36" y="36" width="4" height="8" fill="#FFDA70" class=""></rect>
        </g>
      </g>
    </svg>
  </g>
</svg>

Answer 1

您的内部SVG正在裁剪，因为您已将width和height设置为32x32。但是您的SVG的内容要大得多。实际上是44x44。

该如何解决取决于您实际想要做什么。不幸的是，您并没有真正解释您到底想发生什么。

您遇到的另一个问题是内部SVG上的transform是SVG2的新增功能，尚不被所有浏览器支持。

罗伯特是正确的。您可能只需要切换到<g>元素。如果这样做，您将不必担心裁剪。但是，您需要使用transform而不是x和y来定位形状。

就旋转而言，您可以通过两种方式围绕内部元素旋转内部元素。但是最简单的IMO如下：

使用rotate()的变体，该变体采用旋转中心坐标。形状的左上角为20,20，尺寸为24x24。因此，该中心位于20 + 24/2 = 32。因此，您需要使用`rotate（90，32,32）。见下文。

.canvas{
  background: #000000;
}

<svg width="136" height="200" viewBox="0 0 136 200" class="canvas">
  <g id="grid">
    <line x1="16" x2="112" y1="16" y2="16" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="16" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="48" x2="48" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="80" x2="80" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="112" x2="112" y1="16" y2="176" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="48" y2="48" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="80" y2="80" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="112" y2="112" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="144" y2="144" stroke="rgba(255,255,255,0.3)"></line>
    <line x1="16" x2="112" y1="176" y2="176" stroke="rgba(255,255,255,0.3)"></line>
  </g>
  <g id="items">
    <g transform="translate(32,64) rotate(90, 32,32)">
      <g>
        <g>
          <rect x="20" y="20" width="24" height="24" fill="#683C34" class=""></rect>
        </g>
        <g>
          <rect x="20" y="28" width="24" height="4" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="24" y="20" width="4" height="12" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="36" y="20" width="4" height="8" fill="#F4B03C" class=""></rect>
        </g>
        <g>
          <rect x="20" y="32" width="24" height="4" fill="#FFDA70" class=""></rect>
        </g>
        <g>
          <rect x="24" y="36" width="4" height="8" fill="#FFDA70" class=""></rect>
        </g>
        <g>
          <rect x="36" y="36" width="4" height="8" fill="#FFDA70" class=""></rect>
        </g>
      </g>
    </g>
  </g>
</svg>

如何防止另一个SVG剪辑内的SVG

1 个答案: