码迷,mamicode.com
首页 > 其他好文 > 详细

d3 svg简单学习

时间:2017-05-22 11:11:35      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:填充   family   height   code   width   学习   style   scope   stroke   

矩形

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

标签:填充   family   height   code   width   学习   style   scope   stroke   

原文地址:http://www.cnblogs.com/kugeliu/p/6888328.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!