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 正在裁剪，因为您已将widthand设置height为 32x32。但是您的 SVG 的内容比这要大。它实际上是 44x44。

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

您遇到的另一个问题是，transform在内部 SVG 上是 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>