SVG旋转切断边缘

我想在T恤设计师项目上旋转SVG，但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个代码中的所有内容都是相同的。

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

这是SVG旋转的默认行为还是我缺少一些其他标记，使其工作？任何帮助将非常感激。

谢谢。

来源

2013-07-18 prabal

最有可能是由于从最根部svg元素的视口剪裁。确认root svg的宽度/高度足够大，以便完全包含旋转的部分。 –

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

来源

2013-07-19 18:31:24

SVG旋转切断边缘

回答

相关问题