mozilla

Revision 426975 of marker-end

  • Revision slug: Web/SVG/Attribute/marker-end
  • Revision title: marker-end
  • Revision id: 426975
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment 308 words added, 8 words removedSVG/Attribute/marker-end Web/SVG/Attribute/marker-end

Revision Content

« SVG Attribute reference home

The marker-end defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{ SVGElement("path") }} element or basic shape. Note that for a {{ SVGElement("path") }} element which ends with a closed sub-path, the last vertex is the same as the initial vertex on the given sub-path. In this case, if marker-end does not equal none, then it is possible that two markers will be rendered on the given vertex. One way to prevent this is to set marker-end to none. (Note that the same comment applies to {{ SVGElement("polygon") }} elements.)

Usage context

Categories Presentation attribute
Value none | <funciri> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)
none
Indicates that no marker symbol shall be drawn at the given vertex.
<funciri>
The <funciri> is a Functional IRI reference to the {{ SVGElement("marker") }} element which shall be used as the arrowhead symbol or polymarker at the given vertex or vertices. If the IRI reference is not valid (e.g., it points to an object that is undefined or the object is not a {{ SVGElement("marker") }} element), then the marker(s) will not be drawn.

Examples

Elements

The following elements can use the marker-end attribute

  • {{ SVGElement("path") }}
  • {{ SVGElement("line") }}
  • {{ SVGElement("polyline") }}
  • {{ SVGElement("polygon") }}

See also

  • {{ SVGAttr("marker") }}
  • {{ SVGAttr("marker-start") }}
  • {{ SVGAttr("marker-mid") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>marker-end</code> defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{ SVGElement("path") }} element or <a href="/en/SVG/Element#Basic_shapes" title="en/SVG/Element#Basic_shapes">basic shape</a>. Note that for a {{ SVGElement("path") }} element which ends with a closed sub-path, the last vertex is the same as the initial vertex on the given sub-path. In this case, if <code>marker-end</code> does not equal none, then it is possible that two markers will be rendered on the given vertex. One way to prevent this is to set <code>marker-end</code> to none. (Note that the same comment applies to {{ SVGElement("polygon") }} elements.)</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td>none | <a href="/en/SVG/Content_type#FuncIRI" title="en/SVG/Content_type#FuncIRI">&lt;funciri&gt;</a> | <strong>inherit</strong></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerEndProperty" title="http://www.w3.org/TR/SVG11/painting.html#MarkerEndProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<dl> <dt>none</dt> <dd>Indicates that no marker symbol shall be drawn at the given vertex.</dd> <dt>&lt;funciri&gt;</dt> <dd>The <a href="/en/SVG/Content_type#FuncIRI" title="en/SVG/Content_type#FuncIRI">&lt;funciri&gt;</a> is a Functional IRI reference to the {{ SVGElement("marker") }} element which shall be used as the arrowhead symbol or polymarker at the given vertex or vertices. If the IRI reference is not valid (e.g., it points to an object that is undefined or the object is not a {{ SVGElement("marker") }} element), then the marker(s) will not be drawn.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>marker-end</code> attribute</p>
<ul> <li>{{ SVGElement("path") }}</li> <li>{{ SVGElement("line") }}</li> <li>{{ SVGElement("polyline") }}</li> <li>{{ SVGElement("polygon") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ SVGAttr("marker") }}</li> <li>{{ SVGAttr("marker-start") }}</li> <li>{{ SVGAttr("marker-mid") }}</li>
</ul>
Revert to this revision