SVG基础----绘制SVG圆形

1、绘制圆形

<svg>
    <circle cx="150" cy="150" r="50"></circle>
</svg>

2、圆形描边

可以在样式中使用stroke属性来设置SVG圆形的描边属性，使用stroke-width设置描边的宽度

<svg>
    <circle cx="150" cy="150" r="50" style="stroke:#222222;stroke-width: 2;fill: none;"></circle>
</svg>

可以使用stroke-dasharray属性来实现圆形的虚线描边效果

<svg>
    <circle cx="150" cy="150" r="50" style="stroke:#222222;stroke-width: 2;stroke-dasharray:3;fill: none;"></circle>
</svg>

可以将圆形的描边移除，只需要将它设置为none即可

<svg>
    <circle cx="150" cy="150" r="50" style="stroke:none;fill: #1D7DB1;"></circle>
</svg>

可以使用fill-opacity属性来设置填充色的透明度

<svg>
    <circle cx="150" cy="150" r="50" style="stroke:none;fill: #1D7DB1;"></circle>
    <circle cx="200" cy="200" r="50" style="stroke: none;;fill: #27AE60;fill-opacity: .8;"></circle>
</svg>

3、绘制椭圆

<svg>
    <ellipse cx="150" cy="150" rx="50" ry="30" style="stroke: #193742;fill: #1D7DB1;" />
</svg>

4、椭圆描边

可以在样式中使用stroke属性来设置SVG圆形的描边属性，使用stroke-width设置描边的宽度，可以使用stroke-dasharray属性来实现圆形的虚线描边效果，可以将圆形的描边移除，只需要将它设置为none即可，可以使用fill-opacity属性来设置填充色的透明度

<svg>
    <ellipse cx="150" cy="150" rx="50" ry="30" style="stroke: #193742;stroke-width: 4;fill: #1D7DB1;" />
</svg>

<svg>
    <ellipse cx="150" cy="150" rx="50" ry="30" style="stroke: #193742;stroke-width: 4;stroke-dasharray: 4;fill: none;" />
</svg>

<svg>
    <ellipse cx="150" cy="150" rx="50" ry="30" style="stroke: none;fill: #1D7DB1;" />
</svg>

<svg>
    <ellipse cx="150" cy="150" rx="50" ry="30" style="stroke: none;fill: #1D7DB1;" />
    <ellipse cx="200" cy="180" rx="50" ry="30" style="stroke: none;fill: #27AE60;fill-opacity: .85;"></ellipse>
</svg>