您的位置:首页> HTML5教程> SVG教程

SVG <markers>用法详解

2018-9-13 09:23| 作者: admin| 查看: 3649| 评论: 0|来自: 蚂蚁部落

实际应用中,可能需要在线段的开始或者结尾添加一个箭头或者其他类型标记。

SVG提供了<markers>元素可以很好的实现上述功能,可以标记一条线或路径开始、中间或结束位置。

marker翻译成汉语具有标识或者标记意思,或多或少对此标签的理解记忆有所帮助。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="500" height="500">
  <defs>
    <marker id="arrow"
            markerWidth="10" markerHeight="10"
            refX="0" refY="3"
            orient="auto"
            markerUnits="strokeWidth"
            viewBox="0 0 20 20">
      <path
            d="M0,0 L0,6 L9,3 z"
            fill="#f00"
            />
    </marker>
  </defs>
  <line
        x1="50" y1="50"
        x2="250" y2="50"
        stroke="#000"
        stroke-width="3"
        marker-end="url(#arrow)" />
</svg>  
</body>
</html>

代码演示了<markers>元素的使用,它在一条直线的末端添加一个红色三角形箭头。

下面分步介绍一下<markers>元素的相关属性:

(1).id属性:

其他元素会利用<markers>元素的id属性进行引用。

比如上面的代码片段:

[XML] 纯文本查看 复制代码
marker-end="url(#arrow)"

<line>元素的marker-end属性值为"url(#arrow)","arrow"是<markers>元素的id属性值。

(2).markerWidth和markerHeight属性:

<markers>元素创建一个viewport视窗,上述两个属性用来规定视窗的尺寸。

(3).refX和refY属性:

规定<markers>元素内创建的图形元素哪个位置与指定图形元素相连接。

refX="0" refY="3"规定三角形的(0,3)位置与直线的末端相连接。

所属坐标系是<markers>元素创建视窗内的当前用户坐标系。

(4).orient属性:

前面代码是一条水平直线与箭头相连接。

如果这条直线是倾斜的,那是不是也要人为的调整箭头的方向呢。

不需要,只需要将orient属性值设置为"auto"即可。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="500" height="500">
  <defs>
    <marker id="arrow"
            markerWidth="10" markerHeight="10"
            refX="0" refY="3"
            orient="auto"
            markerUnits="strokeWidth"
            viewBox="0 0 20 20">
      <path
            d="M0,0 L0,6 L9,3 z"
            fill="#f00"
            />
    </marker>
  </defs>
  <line
        x1="50" y1="50"
        x2="250" y2="150"
        stroke="#000"
        stroke-width="3"
        marker-end="url(#arrow)" />
</svg>  
</body>
</html>

尽管直线倾斜了一定角度,但是三角形箭头还是完美的与直线连接起来,如果去掉orient。

运行效果截图如下:

1.jpg

当然也可以人为的规定一角度值,比如50deg(可以不带单位)。

代码片段如下:

[XML] 纯文本查看 复制代码
orient="90"

(5).markerUnits属性:

从属性名称可以猜测功能,用来规定<marker>以及其中绘制的图形的尺寸是以什么为单位的。

属性值可以是"strokeWidth"(默认)或者"userSpaceOnUse"。

以上面代码为例:

(1)."strokeWidth",那么markerWidth="10"实际尺寸就是10乘以line元素的stroke-width值,其他数据同理。

(2)."userSpaceOnUse",那么各个数据的值你规定多少就是多少(是一个绝对值)。

(6).viewBox属性:

<markers>元素会创建一个viewport视窗,所以它也有viewBox。

关于viewBox具体用法参阅SVG viewBox和preserveAspectRatio用法详解一章节。

图形元素引用<markers>:

图形元素可以使用以下三个属性来引用<markers>元素:

(1).marker-start:表示连接路径的开始位置。

(2).marker-mid:表示连接路径的中间位置(后面会具体说明)。

(3).marker-end:表示连接路径的结束位置。

属性值都是如下格式:

[XML] 纯文本查看 复制代码
marker-start : url(#markerId);

#markerId是<markers>元素的id属性值。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<svg width="500" height="500">
  <defs>
    <marker id="markerSquare"
            markerWidth="7"
            markerHeight="7"
            refX="4" refY="4"
            orient="auto">
      <rect x="1" y="1"
            width="5"
            height="5"
            style="stroke:none; fill:#000000;" />
    </marker>
    <marker id="markerArrow"
            markerWidth="13"
            markerHeight="13"
            refX="2" refY="7"
            orient="auto">
      <path d="M2,2 L2,13 L8,7 L2,2" style="fill:#000000;"/>
    </marker>
  </defs>
 
  <path d="M100,20 l50,0 l0,50 l50,0"
        marker-start="url(#markerSquare)"
        marker-mid="url(#markerSquare)"
        marker-end="url(#markerArrow)"
        style="stroke:#0000cc;stroke-width:1px;fill: none;"
        />
</svg>  
</body>
</html>

marker-start和marker-end比较直白,就是连接路径的开始和结尾处。

marker-mid可能会产生一些误解,放置<markers>的"中间"位置存在于路径的连接之处。

代码片段如下:

[XML] 纯文本查看 复制代码
"M100,20 l50,0 l0,50 l50,0"

"M100,20 l50,0"直线是"一笔"下来,中间没有连接点,"M100,20 l50,0 l0,50"则有一个连接点"l50,0"。

于是就会在连接点处放置一个<markers>,以此类推。

特别说明:如果<markers>有两个连接点,如上面代码中间的<markers>,那么marker的x轴正向与两个path的夹角的角等分线走向一致。


鲜花

握手

雷人

路过

鸡蛋
返回顶部