D3 用到的 svg 简单介绍

Rect

rect 用于绘制矩形。x 和 y 用于指定矩形左上角的坐标,而 width 和 height 用于
指定其大小。下面这个矩形会填满 SVG 元素的整个空间,如图 3-14 所示。

<rect x="0" y="0" width="500" height="50"/>

Circle

circle 用于绘制圆形。cx 和 cy 用于指定圆心坐标,而 r 用于指定半径。下面这
个圆形在 500 像素宽的 SVG 画布上居中,因为其 cx(center-x,即圆心 x 坐标)值
等于 250,参见图 3-15。

<circle cx="250" cy="25" r="25"/>

Ellipse

ellipse 与 circle 类似,只不过每个轴要分别指定半径。因此,半径属性不再是
r,而是 rx 和 ry,结果如图 3-16 所示。

<ellipse cx="250" cy="25" rx="100" ry="25"/>

Line

line 用于绘制直线,如图 3-17 所示。x1 和 y1 用于指定起点坐标,x2 和 y2 用于
指定终点坐标。另外,必须用 stroke 指定直线的颜色才能看得见。

<line x1="0" y1="0" x2="500" y2="50" stroke="black"/>

Text

text 用于绘制文本。x 用于指定文本左上角的位置,y 用于指定字体的基线位置。
(基线是印刷术语,指文本中一条不可见的线,所有字母都以之为基准对齐。“p”和
“y”这样的字母会伸到基线以下,伸出的部分叫下伸部分。)以下代码会得到如图
3-18 所示的结果。

<text x="250" y="25">Easy-peasy</text>

SVG 文本会继承 CSS 为父元素指定的字体样式,除非另有指定。(关于给文本添加样
式,我们稍后再介绍。)要覆盖继承的样式,可以像下面这样,结果如图 3-19 所示。

<text x="250" y="25" font-family="serif" font-size="25"
 fill="gray">Easy-peasy</text>

Path

path 用于绘制前面图形之外的其他复杂图形(如地图上的国境线),后面我们会单
独介绍。本节只介绍简单的图形。

样式填充

SVG 的默认样式是黑色填充,没有描边。如果你想添加其他样式,必须自己给元素
添加。常见的 SVG 属性有下面这些。
• fill
颜色值。与使用 CSS 一样,可以使用颜色名、十六进制值,或 RGB、RGBA 值。
• stroke
颜色值。
52 | 第 3 章
• stroke-width
带单位的数值(通常单位是像素)。
• opacity
0.0(完全透明)到 1.0(完全不透明)之间的数值。

另一个与 CSS 类似的地方,是可以通过两种方式给 SVG 元素应用样式:作为元素
属性直接应用(行内)或使用 CSS 样式规则。
以下是通过属性方式给圆形应用样式的例子,结果如图 3-21 所示。

<circle cx="25" cy="25" r="22"
 fill="yellow" stroke="orange" stroke-width="5"/>

另外,也可以删除所有样式属性,通过 article 类来为它定义样式(就像给其他
HTML 元素应用样式一样):

<circle cx="25" cy="25" r="22" class="pumpkin"/>

在样式规则中,使用同样的 fill、stroke 和 stroke-width 属性定义这个类的
样式:

.pumpkin {
     fill: yellow;
     stroke: orange;
     stroke-width: 5;
 }

透明度

有两种应用透明度的方式:或者使用带透明通道的 RGB 值,或者设置 opacity
(不透明度)值。

可以在为 fill 或 stroke 属性指定颜色的时候使用 rgba()。rgba() 接受 0 到 255
(包含及)之间的三个值,分别代表红、绿、蓝,还接受第四个 0.0 到 1.0(包含及)
之间的透明度值。

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"/>

使用 rgba() 可以分别为填充(fill)和描边(stroke)颜色应用透明度。下面几
个圆形填充都是 75% 不透明,而它们的描边都只有 25% 不透明:

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
 stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)"
 stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"/>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)"
 stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"/>

要给整个元素应用透明度,可以设置 opacity 属性。图 3-25 展示了几个完全不透
明的圆形。

<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"
opacity="0.9"/>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"
opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"
opacity="0.1"/>

也可以对已经使用 rgba() 设置了颜色的元素应用 opacity 属性。这时候,透明度
值会相乘。图 3-27 所示的三个圆形的 fill 和 stroke 分别使用了相同的 RGBA 值。
而且除第一个圆形外,另外两个都设置了 opacity 值:

<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"/>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"/>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)"
stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"/>