首页 > 代码库 > [svg翻译教程]椭圆(ellipse元素)和线(line元素)
[svg翻译教程]椭圆(ellipse元素)和线(line元素)
line
先看个例子,这是svg中最简单的线
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <line x1="0" y1="10" x2="0" y2="100" style="stroke:#006600;"/> <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/> <line x1="20" y1="10" x2="100" y2="50" style="stroke:#006600;"/> <line x1="30" y1="10" x2="110" y2="10" style="stroke:#006600;"/></svg>
效果如下
x1,y1 定义 线条的起点
x2,y2 定义 线的终点
ellipse
先看看椭圆的例子
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="40" cy="40" rx="30" ry="15" style="stroke:#006600; fill:#00cc00"/></svg>
和圆一样,椭圆的圆心被定为在cx,cy
圆角在x方向和y方向有两个值,rx,ry 如何rx和ry相等的就会变成一个圆
椭圆的常见属性
stroke-width
边框的宽度
stroke-dasharray
边框为曲线 例如
stroke-dasharray: 10 5;
stroke-opacity
边框的透明度
fill
填充颜色,不填充就是fill:none
fill-opacity
填充的透明度
[svg翻译教程]椭圆(ellipse元素)和线(line元素)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。