我在另一个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>
最佳答案
您的内部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>