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(...) 函数外，以上 2 段代码中的所有内容都是相同的。

可以在此处找到出错的屏幕截图 - http://i.imgur.com/Kr5Azx3.png .在右侧图像中，肘部及其背后的背景都被切掉了。 SVG 文件代码在此处 - http://pastebin.com/LfC7TkwV

这是 SVG 旋转的默认行为，还是我遗漏了一些其他标签来使其正常工作？非常感谢任何帮助。

谢谢。

Answer 1

正如 Erik 所说，旋转操作导致部分设计落在视口(viewport)之外。您可能需要在转换中添加一个小的 translate()，和/或扩大您的 viewBox 的大小，以便它包含新的更大的边界框。