javascript - 没有平移副作用的 SVG 倾斜

Question

我正在尝试使用 HTML5 在 javascript 中倾斜 svg 元素，例如:

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

<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>