围绕中心点缩放

2025 年 3 月 17 日 | 阅读 1 分钟

您可以执行围绕中心点的缩放。为了在对象变大的同时保持轮廓宽度不变，您可以将 stroke-width 除以缩放因子。

示例

<!DOCTYPE html>
<html>
<body>
<svg width="300px" height="300px" viewBox="0 0 200 200">

<circle cx="50" cy="50" r="3" style="fill: black;" />
<g id="p1" style="stroke: black; fill: none;">
<rect x="35" y="40" width="30" height="20" />
</g>

<use xlink:href="#p1" transform="translate(-50,-50) scale(2)"
 style="stroke-width: 0.4;" />
<use xlink:href="#p1" transform="translate(-75,-75) scale(2.5)"
 style="stroke-width: 0.4;" />
<use xlink:href="#p1" transform="translate(-100,-100) scale(3)"
 style="stroke-width: 0.33;" />

</svg>
</body>
</html>

立即测试

下一主题#