SVG 切断圆

Question

我有这样的代码：

<svg width="100" height="100">
   <circle cx="50" cy="50" r="50" stroke="green" stroke='1' stroke-width="1" fill='yellow'/>
</svg>

结果我被切掉了圆圈。

在不减小圆半径的情况下画全圆有什么方法吗？

Answer 1

笔画宽度在笔画线内外。在示例中，我将宽度为 1 的笔划的半径更改为 49.5。在第二个示例中，我使笔划更粗 (10) 并且半透明，这样您就可以看到笔划覆盖了内部填充的一部分和外面。

<svg width="100" height="100">
   <circle cx="50" cy="50" r="49.5" stroke="green" stroke-width="1" fill='yellow'/>
</svg>

<svg width="100" height="100">
   <circle cx="50" cy="50" r="45" stroke="darkblue" stroke-opacity=".5" stroke-width="10" fill='yellow'/>
</svg>

Answer 2

Is it any method to draw full circle without decreasing circles radius ?

也有解决方法，但我强烈推荐

中描述的更简洁的方法

Hacky 解决方法（不改变半径）

<style>
  svg {
    border: 1px dotted #777;
    display: inline-block;
    height: 75vmin;
    width: auto
  }
</style>
  
<h3>1. Quick and dirty: Overflow:visible</h3>
<p>Will just prevent any cropping. <br/>Drawbacks: svg might collide with neighboring elements</p>
<p>
<svg  viewBox="0 0 100 100" overflow="visible">
   <circle cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
  <svg  viewBox="0 0 100 100" overflow="visible">
   <circle cx="50" cy="50" r="50" stroke="red" stroke-width="5" fill='yellow'/>
</svg> 
</p>

<h3>2. Scale element to fit: </h3>
<p>width / (width+strokeWidth) = 0.95238 <br> Drawbacks: Stroke-width will also be decreased due to downscaling</p>
<p>
<svg viewBox="0 0 100 100" >
   <circle transform-origin="center" transform="scale(0.95238)" cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
</p>

<h3>3. Change viewBox to fit</h3>
<p>Drawbacks: Some graphic application might have issues with negative viewBox values (or ignore them)</p>
<p>
<svg viewBox="-2.5 -2.5 105 105">
   <circle  cx="50" cy="50" r="50" stroke="green" stroke-width="5" fill='yellow'/>
</svg> 
</p>

SVG 切断圆

SVG cuts off circle

svg

Hacky 解决方法（不改变半径）