SVG中国

SVG有6种基本形状：矩形(包括圆角矩形)、圆形、椭圆、线段、折线、多边形等。本文介绍了SVG矩形(包括圆角矩形)的属性定义，circle元素的x,y,width,height,rx,ry等详细说明。还介绍通过circle元素表现圆形的SVG实例。

<circle>元素的一些重要属性

<circle>元素使用圆心坐标值和半径值画圆，其属性定义如下：

• cx="<coordinate>" 是圆心在用户坐标系中的x坐标值，缺省值为0。
• cy="<coordinate>" 是圆心在用户坐标系中的Y坐标值，缺省值为0。
• r="<length>" 是圆的半径，不允许为负数。如果是0，则不显示圆。

圆形绘制实例

为了说明圆形的绘制方法，这里举一个例子：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<desc>Example circle01 - circle filled with red and stroked with blue</desc>

<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="1198" height="398"
fill="none" stroke="blue" stroke-width="2"/>

<circle cx="600" cy="200" r="100"
fill="red" stroke="blue" stroke-width="10"  />
</svg>

例子中的圆形显示效果图

在这个例子里，圆的圆心坐标在X坐标600、Y坐标200处。半径为100，采用红色、宽为10的线条描边，填充色为红色。

(THE END)