Ваш внутренний SVG обрезается, потому что вы установили width и height в 32x32.Но содержание вашего SVG больше, чем это.Это на самом деле 44x44.
Как вы это исправите, зависит от того, что вы действительно хотите сделать.К сожалению, вы на самом деле не объяснили, что именно вы хотите, чтобы произошло.
Другая проблема, с которой вы столкнулись, заключается в том, что transform на внутренних SVG-файлах является новым дополнением к SVG2 и пока не поддерживается всеми браузерами.
Роберт прав.Возможно, вам просто нужно переключиться на элемент <g>.Если вы сделаете это, вам не придется беспокоиться об отсечении.Однако вам нужно расположить фигуру с помощью transform вместо x и y.
Что касается вращения, вы можете повернуть свой внутренний элемент вокруг его центра несколькими способами,Но простейшая IMO выглядит следующим образом:
Используйте вариант rotate(), который принимает координаты центра вращения.Верхний левый угол вашей фигуры имеет размер 20,20 и размер 24х24.Так что центр этого находится на 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>