css - 如何防止 SVG 进入另一个 SVG 剪辑

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。

如何解决这个问题取决于您实际想做什么。不幸的是，你还没有真正解释你到底想要发生什么。

您遇到的另一个问题是 transform on inner SVGs 是 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>