marker-start

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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>

示例

html
<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
Scalable Vector Graphics (SVG) 2
# MarkerStartProperty

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
marker-start

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见