首页 > 代码库 > d3 svg简单学习

d3 svg简单学习

矩形

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

圆形

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

椭圆

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

线

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

文本

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

设置样式

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

常见样式

样式/属性含义可能的值
fill 填充 颜色值
stroke 描边 颜色值
stroke-width 描边宽度 数字(通常以像素为单位)
opacity 不透明度 0.0(完全透明)和1.0(完全不透明)之间的数值
font-family 字体 text标签特有,CSS字体
font-size 字体大小 text标签特有,数字
text-anchor 对齐方式 text标签特有,left/center/right

 

d3 svg简单学习