From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../zh-cn/web/svg/attribute/marker-end/index.html | 103 +++++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 files/zh-cn/web/svg/attribute/marker-end/index.html (limited to 'files/zh-cn/web/svg/attribute/marker-end') diff --git a/files/zh-cn/web/svg/attribute/marker-end/index.html b/files/zh-cn/web/svg/attribute/marker-end/index.html new file mode 100644 index 0000000000..348f884d8a --- /dev/null +++ b/files/zh-cn/web/svg/attribute/marker-end/index.html @@ -0,0 +1,103 @@ +--- +title: marker-end +slug: Web/SVG/Attribute/marker-end +translation_of: Web/SVG/Attribute/marker-end +--- +
{{SVGRef}}
+ +

marker-end 属性将在给定形状的最终顶点绘制的箭头或者多边形标记。

+ +

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

+ +

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

+ +

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

{{EmbedLiveSample("topExample", "200", "200")}}

+
+ +

使用说明

+ + + + + + + + + + + + + + + + +
Valuenone | <marker-ref>
Default valuenone
AnimatableYes
+ +
+
none
+
表示将不会在终点绘制任何符号。
+
<marker-ref>
+
这个值表示的是对 {{SVGElement("marker")}} 元素的引用, 将在终点绘制该元素.。如果引用无效，将不会绘制任何东西。
+
+ +

技术指标

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#MarkerEndProperty", "marker-end")}}{{Spec2("SVG2")}}No significant change
{{SpecName("SVG1.1", "painting.html#MarkerEndProperty", "marker-end")}}{{Spec2("SVG1.1")}}Initial definition
+ +

浏览器兼容性

+ + + +

{{Compat("svg.attributes.presentation.marker-end")}}

+ +

另见

+ + -- cgit v1.2.3-54-g00ecf