html - 如何设置正确的 Inline SVG Circle 坐标

Question

我可以制作一个内联 SVG 圆圈 like this :

 <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
    </svg> 

但是，我很难理解 cx和 cy和 height和 width属性。

我想要实现的是 15x15px周围没有可用空间的圆圈，但我似乎做对了。

• <svg height="15" width="15"><circle cx="0" cy="0" r="9" stroke="black" stroke-width="1" fill="#c0c0c0" /></svg>
  这个只显示右下角
• <svg height="15" width="15"><circle cx="7.5" cy="7.5" r="9" stroke="black" stroke-width="1" fill="#c0c0c0" /></svg>这个把圆切成正方形

实现我想要的目标的正确方法是什么？您可以在这里自己尝试:https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle

Answer 1

为了清晰起见，让我们让 SVG Canvas 边框可见。为此，请在 SVG 文件的标题中编写 CSS 样式

style="border:1px solid"

<svg height="100" width="100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 

下一步是使用 JS getBBox() 为圆的边界矩形定义参数 width, height, x, y方法

<svg height="100" width="100" viewBox="0 0 100 100" style="border:1px solid">
  <circle id="circ" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

可以看到矩形的宽度是 80px 从 SVG Canvas 开始填充 10px，总大小是 10 + 80 + 10 = 100px

如果您希望 svg 元素周围没有空白，您需要删除这些边距并添加空间以适应 3px 的圆圈描边

<svg height="84" width="84" viewBox="0 0 84 84" style="border:1px solid">
  <circle id="circ" cx="42" cy="42" r="40" stroke="black" stroke-width="3" fill="red" />
</svg> 
<script>
let bb = circ.getBBox();
console.log(bb);
</script>

SVG Canvas 周围的边框可以移除，因为它用于视觉调试定位