marker-end - SVG 编辑

marker-end 属性将在给定形状的最终顶点绘制的箭头或者多边形标记。

对于除SVG的polyline和path元素之外的所有形状元素，最后的一个顶点与第一个顶点相同。在这种情况下，如果SVG的marker-start属性和 marker-end 的值都不是 none ，然后再最后一个顶点渲染两个图标。 对于一个 <path> 元素， 对于每个封闭的子路径，他的最后一个顶点都与第一个顶点相同。 marker-end 仅在路径数据的最终顶点上呈现。

Note: 作为一个图像属性, marker-end 可以用作css属性.

作为一个图像属性，他可以应用到所有的元素上，但是他只针对于一下其中元素有效:  <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect>

html, body, svg {
  height: 100%;
}

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="triangle" viewBox="0 0 10 10"
          refX="1" refY="5"
          markerUnits="strokeWidth"
          markerWidth="10" markerHeight="10"
          orient="auto">
      <path d="M 0 0 L 10 5 L 0 10 z" fill="#f00"/>
    </marker>
  </defs>
  <polyline fill="none" stroke="black"
      points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/>
</svg>

使用说明

Value	none | <marker-ref>
Default value	none
Animatable	Yes

none

表示将不会在终点绘制任何符号。

<marker-ref>

这个值表示的是对 <marker> 元素的引用, 将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。

技术指标

Specification	Status	Comment
Scalable Vector Graphics (SVG) 2 marker-end	Candidate Recommendation	No significant change
Scalable Vector Graphics (SVG) 1.1 (Second Edition) marker-end	Recommendation	Initial definition

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

另见

• <marker>
• marker-start
• marker-mid