marker-start

marker-start 属性将在给定形状的起始顶点绘制的箭头或者多边形标记

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

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

作为一个图像属性,他可以应用到所有的元素上,但是他只针对于一下其中元素有效:  <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, 和<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-start="url(#triangle)"/>
</svg>

使用说明

none | <marker-ref>
默认值 none
可用作与动画
none
表示将不会在起点绘制任何符号。
<marker-ref>
这个值表示的是对 <marker> 元素的引用, 将在起点绘制该元素.。如果引用无效,将不会绘制任何东西。

技术指标

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

浏览器兼容性

BCD tables only load in the browser

另见