SVG围绕中心点缩放用法示例

你可以围绕中心点执行缩放。要在对象变大时保持轮廓的宽度不变, 可以将笔划宽度除以缩放因子。

例子

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

立即测试

微信公众号
手机浏览(小程序)

Warning: get_headers(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:ssl3_get_server_certificate:certificate verify failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(): Failed to enable crypto in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57

Warning: get_headers(https://static.shanhubei.com/qrcode/qrcode_viewid_46626.jpg): failed to open stream: operation failed in /mydata/web/wwwshanhubei/web/wp-content/themes/shanhuke/single.php on line 57
0
分享到:
没有账号? 忘记密码?