d3 svg简单学习

Posted 2020-09-19 无情码字员

矩形

<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