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>

回転後 (エッジの 1 つが切り取られています!!!)

<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 に答える