SVG圆在视口中不完全可见

时间:2018-10-19 13:24:39

标签: svg

此SVG:

<svg width="50" height="50">
  <circle cx="0" cy="0" r="50"></circle>
</svg>

仅显示圆圈的右下角。为什么是这样?我希望圈子完全可见?

https://jsfiddle.net/b2gq1sf6/

1 个答案:

答案 0 :(得分:0)

由于将坐标(x,y)设置为(0,0),因此圆的中点位于屏幕左上方(0,0)。您需要相对于屏幕或想要放置圆心的位置给出(x,y)。由于您指定的半径为50,因此svg的最小宽度和高度应为100。

<svg width="100" height="100">
<circle cx="50" cy="50" r="50"></circle>
</svg>

还要查看视口here