SVG旋转会剪切边

Question

我正试图在T恤设计师项目上旋转SVG，但SVG的边缘被切掉了。SVG的代码如下：

旋转前（此处所有内容都正确）

<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(0,50,50)" id="clip1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1">
    <g>
    [POLYGON CODE WAS HERE]
    </svg>
</g>

旋转后（其中一条边被切掉！！）

<g xmlns="http://www.w3.org/2000/svg" transform="scale(2,2)rotate(45,50,50)" id="clip1">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" id="Layer_1" version="1.1">
    <g>
    [POLYGON CODE WAS HERE]
    </svg>
</g>

除了rotate（…）函数外，以上两个代码中的所有内容都是相同的。

出现问题的屏幕截图可以在这里找到-https://i.stack.imgur.com/ZCyou.png.在右侧图像中，肘部以及肘部后面的背景都被剪掉了。SVG文件代码出现在这里-http://pastebin.com/LfC7TkwV

这是SVG旋转的默认行为吗？还是我缺少了其他标记来实现这一点？任何帮助都将不胜感激。

谢谢。

Answer 1

正如Erik所说，旋转操作导致部分设计落在视口之外。您可能需要在变换中添加一个小translate（），和/或放大viewBox的大小，使其包含新的较大边界框。