marker-start
marker-start
CSS 属性指向将在元素路径的第一个顶点(即其起始顶点)绘制的标记。该标记必须使用 SVG <marker>
元素定义,并且只能通过 url()
值引用。CSS 属性的值会覆盖 SVG 中 marker-start
属性的任何值。
对于许多支持标记的形状,第一个和最后一个顶点在同一个位置:例如,<rect>
的左上角。在这样的形状中,如果第一个和最后一个标记都被定义,则将在该点绘制两个标记,尽管它们可能不指向同一个方向。
注意:marker-start
属性只会对可以使用 SVG 标记的元素产生影响。有关列表,请参见 marker-start
。
语法
css
marker-start: none;
marker-start: url(markers.svg#arrow);
/* Global values */
marker-start: inherit;
marker-start: initial;
marker-start: revert;
marker-start: revert-layer;
marker-start: unset;
值
none
-
这意味着在元素路径的第一个顶点不会绘制任何标记。
<marker-ref>
-
一个
<url>
,它引用了由 SVG<marker>
元素定义的标记,该标记将在元素路径的第一个顶点绘制。如果 URL 引用无效,则不会在路径的第一个顶点绘制任何标记。
正式定义
值未在数据库中找到!
正式语法
marker-start =
none |
<marker-ref>
<marker-ref> =
<url>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
示例
html
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker
id="triangle"
viewBox="0 0 10 10"
markerWidth="10"
markerHeight="10"
refX="1"
refY="5"
markerUnits="strokeWidth"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="#f00" />
</marker>
</defs>
<polyline
id="test"
fill="none"
stroke="black"
points="20,100 40,60 70,80 100,20" />
</svg>
css
polyline#test {
marker-start: url(#triangle);
}
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # VertexMarkerProperties |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
marker-mid
marker-end
marker
- SVG
marker-start
属性