3

我不知道如何在调整页面大小时将一个圆形元素放在 svg 的中心,而它不会四处移动或变得越来越小。

我试过 viewBox 但它没有达到我的预期。

4

3 回答 3

11

变体的替代方案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>

http://jsfiddle.net/dAEB9/

于 2013-10-24T08:44:18.180 回答
5
<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

http://jsfiddle.net/QrNnN/

于 2013-10-24T00:57:40.213 回答
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/

于 2017-12-28T14:25:23.090 回答