2

我正在尝试在 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>

上述 2 个代码中的所有内容都相同，除了 rotate(...) 函数。

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

这是 SVG 旋转的默认行为，还是我错过了其他一些标签来完成这项工作？任何帮助将不胜感激。

谢谢。

4

1 回答 1

1

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

于 2013-07-19T18:31:24.160 回答