marker-end
**marker-end
** CSS 属性指向将在元素路径的最后一个顶点绘制的标记;即在它的结束顶点。该标记必须使用 SVG <marker>
元素定义,并且只能使用 url()
值引用。CSS 属性的值将覆盖 SVG 中 marker-end
属性的任何值。
对于许多支持标记的形状,第一个和最后一个顶点是同一个点:例如,<rect>
的左上角。在这样的形状中,如果第一个和最后一个标记都已定义,则将在该点绘制两个标记,尽管它们可能不会朝同一个方向。
注意:marker-end
属性将仅对可以使用 SVG 标记的元素产生影响。请参阅 marker-end
以获取列表。
语法
css
marker-end: none;
marker-end: url(markers.svg#arrow);
/* Global values */
marker-end: inherit;
marker-end: initial;
marker-end: revert;
marker-end: revert-layer;
marker-end: unset;
值
none
-
这意味着在元素路径的最后一个顶点不会绘制任何标记。
<marker-ref>
-
一个
<url>
,它引用由 SVG<marker>
元素定义的标记,将在元素路径的最后一个顶点绘制。如果 URL 引用无效,则不会在路径的最后一个顶点绘制任何标记。
正式定义
在数据库中找不到值!
正式语法
marker-end =
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-end: url(#triangle);
}
规范
规范 |
---|
可缩放矢量图形 (SVG) 2 # VertexMarkerProperties |
浏览器兼容性
BCD 表格仅在浏览器中加载
另请参阅
marker-start
marker-mid
marker
- SVG
marker-end
属性