#绘制圆心_SVG 绘制圆形

最新推荐文章于 2022-02-07 15:14:07 发布

网易王三三

最新推荐文章于 2022-02-07 15:14:07 发布

阅读量295

点赞数

文章标签： #绘制圆心

本文链接：https://blog.csdn.net/weixin_34975747/article/details/112657532

版权

本节我们来学习如何在 SVG 中绘制圆形，圆形也是 SVG 的基本形状之一，我们可以通过 <circle> 元素来绘制原型。

如何绘制一个圆形

要绘制圆形可以通过 <circle> 元素来实现，在绘制圆形时，我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性，半径需要用到 r 属性。除此之外，还可以使用 fill 属性圆进行颜色填充，stroke 属性进行描边等。

示例：

例如我们创建一个圆：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>SVG学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./style.css">
    </head>
    <body>
        <svg>
            <circle  cx="100" cy="60" r="50" style="fill:pink; stroke:red; stroke-width:2;"/>
        </svg>
    </body>
</html>

这样一个圆形就创建好啦，效果如下

上述代码中圆的圆心被设置为(100,60)，半径被设置为50px，填充颜色为粉色，描边颜色为红色，边的宽度为2px。

注意如果不设置圆心，则圆心会默认被设置为 (0, 0)。

为圆设置虚线边框

除了实现边框，我们还可以给圆设置虚线边框，这需要用到 stroke-dasharray 属性。stroke-dasharray 属性带有两个值，第一个值为短划线，第二个值为缺口的长度，值之间使用空格隔开。

示例：

给圆设置虚线边框：

<svg>
    <circle  cx="100" cy="60" r="50" style="fill:pink; stroke:red; stroke-dasharray:7 3; stroke-width:2;"/>
</svg>

在浏览器中的演示效果为：

可以看到，上图中，圆的虚线边框划线长度为7px，缺口长度为3px，可以根据需要调整stroke-dasharray属性的属性值。

去掉填充颜色

有些时候我们可能不想要设置圆的填充颜色，但是圆本身又带有一个黑色的填充色，如果我们想要去掉圆的填充颜色，只需要将 fill 属性的值设置为 none 即可。

示例：

<svg>
    <circle  cx="100" cy="60" r="50" style="fill:none; stroke:red; stroke-width:2;"/>
</svg>

在浏览器中的演示效果为：

从上图中可以看到，这样就成功绘制了一个没有填充颜色的圆啦。

网易王三三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
#绘制圆心_SVG 绘制圆形

本节我们来学习如何在 SVG 中绘制圆形，圆形也是 SVG 的基本形状之一，我们可以通过 <circle> 元素来绘制原型。如何绘制一个圆形要绘制圆形可以通过 <circle> 元素来实现，在绘制圆形时，我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性，半径需要用到 r 属性。除此之外，还可以使用 fill 属性圆进行颜色填充，stroke 属...
复制链接

扫一扫