svg中的<circle> 元素，是用来绘制圆形的，例如

<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/></svg>

效果如下

属性说明 cx，cy 设定圆心，r设定半径

圆形的边框

可以通过设置样式设置圆形的边框

例如

<circle cx="40" cy="40" r="24"style="stroke:#006600;stroke-width: 3;fill:#00cc00"/>

属性说明 stroke             边框的颜色

        stroke-width       边框的宽度

        fill               填充的颜色

效果如下

当然可以通过 stroke-dasharray  属性设置边框为虚线

例如

<circle cx="40" cy="40" r="24"style="stroke:#006600;stroke-width: 3;stroke-dasharray: 10 5;fill:#00cc00"/>

效果如下

也可以禁用边框 例如

<circle cx="40" cy="40" r="24"style="stroke: none;fill:#00cc00"/>

效果

圆形的填充

style 中的fill 属性用于设置圆形如何填充，如果不想圆形被填充可以把fill设置为none

例如这是一个不填充的效果

<circle cx="40" cy="40" r="24"style="stroke: #00600;fill:none"/>

这是一个填充颜色的例子

<circle cx="40" cy="40" r="24"style="stroke: #660066;fill: #00ff00"/>

还可以通过fill-opacity来设置透明度

例如两个圆部分重叠在一起

<circle cx="40" cy="40" r="24"style="stroke: #660000;fill: #cc0000" />
<circle cx="64" cy="40" r="24"style="stroke: #000066;fill: #0000cc"fill-opacity: 0.5/>

转载于:https://www.cnblogs.com/qqloving/p/4188987.html

[翻译svg教程]svg中的circle元素相关推荐

svg添加html控件,SVG中嵌入HTML元素
.clsfont{ border:1px solid #ccc;background:#fff;line-height:37px;color:#999;font-size:14px;text-alig ...
SVG 教程（七）SVG 实例，SVG 参考手册
SVG 实例在线实例下面的例子是把SVG代码直接嵌入到HTML代码中. 谷歌Chrome,火狐,Internet Explorer9,和Safari都支持. 注意:下面的例子将不会在Opera运行 ...
使用SVG中的Symbol元素制作Icon
前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果.我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给 ...
SVG 教程（一）
SVG 简介 SVG 是使用 XML 来描述二维图形和绘图程序的语言. 学习之前应具备的基础知识: 继续学习之前,你应该对以下内容有基本的了解: HTML XML 基础如果希望首先学习这些内容,请在 ...
SVG 教程（六）SVG 阴影，SVG 渐变 - 线性，SVG 渐变- 放射性
SVG 阴影注意: Internet Explorer和Safari不支持SVG滤镜! <defs> 和 <filter> 所有互联网的SVG滤镜定义在<defs> ...
SVG 教程（五）文本，Stroke 属性，SVG 滤镜，SVG 模糊效果
SVG <text> SVG 文本 - <text> <text> 元素用于定义文本. 实例 1 写一个文本: 下面是SVG代码: <svg xmlns=&q ...
SVG 教程（四）多边形，曲线，路径
SVG <polygon> SVG 多边形 - <polygon> 实例 1 <polygon> 标签用来创建含有不少于三个边的图形. 多边形是由直线组成,其形状是 ...
SVG 教程（三）圆形，椭圆，直线
SVG <circle> SVG 圆形 - <circle> <circle> 标签可用来创建一个圆: 下面是SVG代码: <svg xmlns=" ...
SVG 教程（二）矩形
SVG <rect> SVG Shapes SVG有一些预定义的形状元素,可被开发者使用和操作: 矩形 <rect> 圆形 <circle> 椭圆 <elli ...

[翻译svg教程]svg中的circle元素

圆形的边框

圆形的填充

[翻译svg教程]svg中的circle元素相关推荐

最新文章

热门文章