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

d3 svg简单学习

2024-09-24 04:03:21   215人阅读

矩形

<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简单学习


联系
我们