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

【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="http://www.srcmini.com/#p1" transform="translate(-50, -50) scale(2)" style="stroke-width: 0.4; " /> < use xlink:href="http://www.srcmini.com/#p1" transform="translate(-75, -75) scale(2.5)" style="stroke-width: 0.4; " /> < use xlink:href="http://www.srcmini.com/#p1" transform="translate(-100, -100) scale(3)" style="stroke-width: 0.33; " /> < /svg> < /body> < /html>

立即测试

    推荐阅读