如何在svg中围绕一个圆圈进行描边

Question

我试图在一个svg圈子周围做一下，但顶部有一个扁平化。底部。左右两边。

<div class="wrapper">

<svg version="1.1" id="elp-badge" class="headerbadge"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1"
    xml:space="preserve">

    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="144.5"/>       
</svg> 

</div> 

这是它的样子：

这是我的小提琴：https://jsfiddle.net/nLf7ad3p/2/

如何纠正扁平化？

Answer 1

半径应该只应用一半。那是144.5 / 2 = 72.25。

<div class="wrapper">

<svg version="1.1" id="elp-badge" class="headerbadge"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1"
    xml:space="preserve">

    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="72.25"/>       
</svg> 

</div> 

https://jsfiddle.net/nLf7ad3p/4/

通过这个，你将获得更小的圆圈。要增大尺寸，只需将宽度和高度值设置得更高。

Answer 2

只需将padding添加到父级：

.wrapper {
  width: 250px;
  height: 250px;
}
svg {
  padding: 10px;
}

<div class="wrapper">
  <svg version="1.1" id="elp-badge" class="headerbadge" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 289.1 289.1" enable-background="new 0 0 289.1 289.1" xml:space="preserve">
    <circle class="circle" fill="#1e90ff" stroke="red" stroke-width="5" cx="144.5" cy="144.5" r="144.5"/>       
  </svg>
</div>

预习

这就是我得到的：