javascript - 翻訳なしのSVGスキューイング-副作用

Question

たとえば、JavaScript内のsvg要素をHTML5でスキューしようとしています。

<svg>
<g transform="skewX(20)>
<rect width="50" height="35" fill="red"></rect>
</g>
</svg>

要素内のrect<g>は正しく傾斜していますが、rect要素も右に移動しました（不要）。transform= "translate（-20）"を使用して手動で位置を設定しようとしましたが、メジャーが正しくありません。

これに対する解決策はありますか？

Answer 1

これのことですか？

<svg>
<g transform="skewX(20) translate(-20, 0)">
<rect width="50" height="35" fill="red"></rect>
</g>
</svg>