SVG基础 | 绘制SVG圆形和椭圆形

时间：2016-03-08
1.jpg

　　SVG <circle>元素用于绘制一个圆形。<ellipse>元素则用于绘制椭圆形。我们先从圆形说起，下面是一个绘制SVG圆形的例子。
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/>
  3. </svg>   
复制代码

　　上面代码的返回结果如下：

2.jpg

　　cx和cy表示圆心的坐标，r属性则是圆的半径。

　　圆形描边

　　你可以在样式中使用stroke属性来设置SVG圆形的描边属性。在上面的例子中，圆形的描边被设置为暗绿色。除了描边颜色，你还可以使用stroke-width设置描边的宽度。看下面的例子：
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke:#006600;
  3.            stroke-width: 3;
  4.            fill:#00cc00"/>   
复制代码

　　上面代码的返回结果如下：

3.jpg

　　注意这个例子中圆的描边宽度要比上面例子的宽。

　　你还可以使用stroke-dasharray属性来实现圆形的虚线描边效果。
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke:#006600;
  3.            stroke-width: 3;
  4.            stroke-dasharray: 10 5;
  5.            fill:#00cc00"/>      
复制代码

　　上面代码的返回结果如下：

4.jpg

　　最后，你也可以将圆形的描边移除，只需要将它设置为none即可。
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke: none;
  3.            fill:#00cc00"/>        
复制代码

　　上面代码的返回结果如下：

5.jpg

　　填充圆形

　　fill属性可以控制SVG圆形的填充色。设置为none则不会填充任何颜色。
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke: #00600;
  3.            fill:none"/>     
复制代码

　　上面代码的返回结果如下：

6.jpg

　　下面是一个填充了紫色的圆形。
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke: #660066;
  3.            fill: #cc3399"/>      
复制代码

7.jpg　　

　　最后，你可以使用fill-opacity属性来设置填充色的透明度。下面的例子中绘制了两个部分叠加的圆形，上面圆形的填充透明度被设置为50%
  1. <circle cx="40" cy="40" r="24"
  2.     style="stroke: #660000;
  3.            fill: #cc0000" />
  4. <circle cx="64" cy="40" r="24"
  5.     style="stroke: #000066;
  6.            fill: #0000cc;
  7.            fill-opacity: 0.5"/>  
复制代码

　　上面代码的返回结果如下：

8.jpg

　　SVG椭圆

　　SVG椭圆和圆形类似，只是它的半径不相等，它的半径用rx和ry属性来表示。看下面的例子。
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <ellipse cx="40" cy="40" rx="30" ry="15"
  3.            style="stroke:#006600; fill:#00cc00"/>
  4. </svg>      
复制代码

　　上面代码的返回结果如下：

9.jpg

　　SVG椭圆的描边

　　同样，你可以使用stroke-width属性来设置椭圆的描边宽度。
  1. <ellipse cx="50" cy="50" rx="40" ry="30"
  2.          style="stroke: #ff0000;
  3.                stroke-width: 5;
  4.                fill: none;
  5.         "/>      
复制代码

　　上面代码的返回结果如下：

10.jpg

　　你也可以将椭圆的描边制作为虚线。下面的例子中虚线的长度为10像素，两个虚线之间的间距为5像素。
  1. <ellipse cx="50" cy="50" rx="40" ry="30"
  2.          style="stroke: #ff0000;
  3.                stroke-width: 5;
  4.                stroke-dasharray: 10 5;
  5.                fill: none;
  6.         "/>   
复制代码
11.jpg
　　另外，你还可以使用stroke-opacity来设置描边的透明度。
  1. <ellipse cx="50" cy="50" rx="40" ry="30"
  2.          style="stroke: #ff0000;
  3.                stroke-width: 5;
  4.                fill: none;
  5.         "/>

  7. <ellipse cx="60" cy="60" rx="40" ry="30"
  8.          style="stroke: #0000ff;
  9.                stroke-width: 5;
  10.                stroke-opacity: 0.5;
  11.                fill: none;
  12.         "/>            
复制代码

　　上面代码的返回结果如下：

12.jpg

　　SVG椭圆的填充色

　　同样还是使用fill属性来设置SVG椭圆的填充色。
  1. <ellipse cx="50" cy="50" rx="40" ry="30"
  2.          style="stroke: #ff0000;
  3.                stroke-width: 5;
  4.                fill: #ff6666;
  5.         "/>      
复制代码
13.jpg

　　和SVG圆形一样，椭圆也可以设置填充的透明度。
  1. <ellipse cx="50" cy="50" rx="40" ry="30"
  2.          style="stroke: #ff0000;
  3.                stroke-width: 5;
  4.                fill: none;
  5.         "/>

  7. <ellipse cx="60" cy="60" rx="40" ry="30"
  8.          style="stroke: none;
  9.                fill: #0000ff;
  10.                fill-opacity: 0.5;
  11.         "/>                 
复制代码

　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506041971.html




14.jpg
上一篇：HTML5 CANVAS：像素处理 下一篇：SVG基础 | 绘制SVG矩形

相关文章

最新文章

Copyright © 2022-2023 HTML5模板网 版权所有并保留所有权