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旋轉切斷邊緣

回答

相關問題