SVG
一、绘制圆形
1. SVG 命名空间
- # xmlns="http://www.w3.org/2000/svg"
- # xmlns:xlink="http://www.w3.org/1999/xlink"
这是XML链接语言[(XLink)规范中定义的XML命名空间。有关 XML 的信息,请参阅可扩展[标记语言 (XML) 1.0 规范。
2. SVG
-
-
项目 -
- "background-color: aqua;">
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
"60" cy="60" r="26" style="stroke:#006600; fill:#FF0000" /> -
-
-
-
运行结果:
该圆以点cx , cy为圆心,半径为r。cx,cy 和r是
二、圆形描边
使用SVG stroke样式属性设置SVG圆的笔触(轮廓)。
笔划设置为#006600深绿色。但是,不仅可以设置笔触颜色,还可以设置更多。还可以使用stroke-widthstyle属性设置笔触宽度 。
示例
"40" cy="40" r="24" style="stroke:#006600; - stroke-width: 3;
- fill:#FF0000"
运行后圆圈的外观:
可以使用stroke-dasharray属性以虚线绘制边框。
- style="stroke:#006600;
- stroke-width: 3;
- stroke-dasharray: 10 5;
- fill:#FF0000"/>
-
渲染后的外观 :
删除圆的边框(轮廓),仅用填充颜色填充圆。
- style="stroke: none;
- fill:#FF0000"/>
-
没有边框的圆运行后效果如下:
三、Circle 填充
该fill样式属性控制圈的填充方式。通过将fill属性设置为,可以选择完全不填充none。示例如下:
- style="stroke: #660066;
- fill: none"/>
-
这是没有填充的圆的外观
使用fill 属性设置填充颜色。
代码如下:
- style="stroke: #660066;
- fill: #FF0000"/>
-
绘制圆并填充颜色的外观如下:
使用fill-opacity style属性将填充设置为透明。以下示例绘制了两个圆,一个圆部分位于另一个圆的上方,并且是半透明的。
例
-
"40" cy="40" r="24" style="stroke: #660000; - fill: #cc0000;
- ">
-
"64" cy="40" r="24" style="stroke: #000099; - fill: #0000cc;
- fill-opacity: 0.5;
- ">
-
运行效果如下:
蓝色(右)圆圈现在在内部是半透明的。要使笔划也为半透明,则必须使用stroke-opacitystyle属性。
四、总结
本文基于Html基础,利用SVG画不一样的圆形,添加不一样的效果。以及在实际开发项目中需要注意的点,遇到的一些难点, 都提供了一些有效等等解决方案。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望能够帮助读者更好的去学习SVG。
本文转载自微信公众号「前端进阶学习交流」,可以通过以下二维码关注。转载本文请联系前端进阶学习交流公众号。