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

简介: svg中的 元素,是用来绘制圆形的,例如   效果如下 属性说明 cx,cy 设定圆心,r设定半径 圆形的边框 可以通过设置样式设置圆形的边框 例如 属性说明 stroke 边框的颜色 ...

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>

 

效果如下

image

属性说明 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"/>

image

这是一个填充颜色的例子

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

image

还可以通过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/>
imagetest
相关文章
|
2月前
|
XML 编解码 前端开发
svg和canvas的区别
【10月更文挑战第24天】SVG和Canvas各有优缺点,在实际应用中需要根据具体的需求和场景来选择合适的技术来实现图形绘制和交互效果。
72 1
|
3月前
|
XML JavaScript 前端开发
SVG学习
【10月更文挑战第1天】
61 3
|
3月前
|
XML 存储 前端开发
canvas与svg的区别
canvas与svg的区别
33 4
|
3月前
|
XML 前端开发 JavaScript
Canvas 和 SVG 的区别
Canvas 和 SVG 的区别
71 0
|
3月前
|
XML 移动开发 前端开发
Canvas和SVG的区别
Canvas和SVG的区别
154 0
|
8月前
|
XML 前端开发 JavaScript
canvas和svg有什么区别
canvas和svg的区别
|
8月前
|
XML 存储 前端开发
canvas和svg的区别
canvas和svg的区别
|
XML 前端开发 JavaScript
canvas 和 svg 的区别是什么
canvas 和 svg 的区别是什么
98 0
|
8月前
|
XML 移动开发 前端开发
Canvas和SVG有什么区别?
Canvas和SVG有什么区别?
80 1
|
8月前
|
XML 移动开发 前端开发
canvas与svg区别与实际应用
canvas与svg区别与实际应用
73 0