marker-end

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>

<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>

Usage notes

Value none | <marker-ref>
Default value none
Animatable Yes
none
表示将不会在终点绘制任何符号。
<marker-ref>
这个值表示的是对 <marker> 元素的引用, 将在终点绘制该元素.。如果引用无效,将不会绘制任何东西。

Specifications

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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
marker-endChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also