line

line元素是一个SVG基本形状,用来创建一条连接两个点的线。

用法

类别基本元素, 图形元素, 形状元素
允许的内容物任意数量、任意排序的下列元素:
动画元素
描述性元素

示例

源代码 输出结果
<?xml version="1.0"?>
<svg width="120" height="120" 
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <line x1="20" y1="100" 
          x2="100" y2="20" 
          stroke="black" 
          stroke-width="2"/>

</svg>

» line.svg

你可以应用变形以得到同样的结果。从一条常见的线开始:

源代码 输出结果
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"/>
</svg>

» line1.svg

添加变形选项以改变线的方向:

源代码 输出结果
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
    <line x1="20" y1="100" x2="100" y2="100" stroke-width="2" 
	stroke="black" transform="rotate(-45 20 100)"/>
</svg>

» line2.svg

属性

全局属性

专有属性

DOM 接口

该元素实现了SVGLineElement接口

浏览器兼容性

功能 Chrome Firefox (Gecko) IE Opera Safari
基本支持 1.0 1.5 (1.8) 9.0 8.0 3.0.4
功能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本支持 3.0 1.0 (1.8) 未实现 (Yes) 3.0.4

该表格基于这些资源

相关内容

文档标签和贡献者

标签: 
 此页面的贡献者: Sebastianz, fanxiaojie
 最后编辑者: Sebastianz,