javascript - 无平移副作用的 SVG 倾斜

Question

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

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

元素内的矩形<g>倾斜好了，但是矩形元素也向右移动（不需要），我尝试使用 transform="translate(-20)" 手动设置位置，但测量不正确，

有什么解决办法吗？

Answer 1

你是这个意思吗？

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