CSS marker 属性

定义和用法

marker 属性指向一个标记，该标记将绘制在元素路径的所有顶点上（即第一个、中间和最后一个顶点）。

标记的形状由 SVG <marker> 元素定义，并通过 url() 值进行引用。

CSS marker 属性的值会覆盖 SVG 中 marker 属性的任何值。

实例

例子 1

指向一个标记（箭头），该标记将绘制在元素路径的第一个、中间和最后一个顶点上：

#test {
  marker: url(#arrow);
}

亲自试一试

例子 2

指向一个标记（圆圈），该标记将绘制在元素路径的第一个、中间和最后一个顶点上：

#test {
  marker: url(#circle);
}

亲自试一试

CSS 语法

marker: none|url|initial|inherit;

属性值

值 描述
none 默认值。在路径上不会绘制任何标记。
url 对由 SVG <marker> 元素定义的标记的 URL 引用。
initial 将此属性设置为其默认值。参阅 initial。
inherit 从其父元素继承此属性。参阅 inherit。

浏览器支持

表格中的数字表示首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
80 80 72 13.1 67

相关页面

教程：SVG 标记

参考：CSS marker-start 属性

参考：CSS marker-mid 属性

参考：CSS marker-end 属性