当我调整页面大小时,我不知道如何将圆形元素放在svg的中心而不会移动或变得越来越小。
我已经尝试了viewBox,但它没有达到我的预期。
答案 0 :(得分:6)
viewBox
变种的替代方案:
<svg width="100" height="100">
<circle cx="50%" cy="50%" r="10"/>
</svg>
如果缩放整个页面,圆圈会变大。
另一种方法是使用带有圆形线框的零长度路径,如下所示:
<svg viewBox="0 0 100 100">
<path d="M50 50" stroke-linecap="round" stroke="black"
fill="none" vector-effects="non-scaling-stroke"
stroke-width="20"/>
</svg>
答案 1 :(得分:4)
<svg viewBox="-1 -1 2 2"> <!-- viewBox defines the coordinate system.-->
<circle cx="0" cy="0" r="1" />
</svg>
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
答案 2 :(得分:0)
将您的圈子放入群组<g>
并使用transform="translate(x, y)"
。
<svg viewBox="0 0 400 400">
<g transform="translate(200, 200)">
<circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle>
</g>
</svg>
关于JSFiddle的简单示例:
https://jsfiddle.net/mattez/0p2pstrf/