Movatterモバイル変換

[0]ホーム
URL:

  1. Web
  2. SVG
  3. Reference
  4. Elements
  5. <marker>

<marker>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The<marker>SVG element defines a graphic used for drawing arrowheads or polymarkers on a given<path>,<line>,<polyline> or<polygon> element.

Markers can be attached to shapes using themarker-start,marker-mid, andmarker-end properties.

Usage context

CategoriesContainer element
Permitted contentAny number of the following elements, in any order:
Animation elements
Descriptive elements
Shape elements
Structural elements
Gradient elements
<a>,<clipPath>,<filter>,<foreignObject>,<image>,<marker>,<mask>,<pattern>,<script>,<style>,<switch>,<text>,<view>

Attributes

markerHeight

This attribute defines the height of the marker viewport.Value type:<length>;Default value:3;Animatable:yes

markerUnits

This attribute defines the coordinate system for the attributesmarkerWidth,markerHeight and the contents of the<marker>.Value type:userSpaceOnUse |strokeWidth;Default value:strokeWidth;Animatable:yes

markerWidth

This attribute defines the width of the marker viewport.Value type:<length>;Default value:3;Animatable:yes

orient

This attribute defines the orientation of the marker relative to the shape it is attached to.Value type:auto |auto-start-reverse |<angle>;Default value:0;Animatable:yes

preserveAspectRatio

This attribute defines how the svg fragment must be deformed if it is embedded in a container with a differentaspect ratio.Value type: (none |xMinYMin |xMidYMin |xMaxYMin |xMinYMid |xMidYMid |xMaxYMid |xMinYMax |xMidYMax |xMaxYMax) (meet |slice)?;Default value:xMidYMid meet;Animatable:yes

refX

This attribute defines the x coordinate for the reference point of the marker.Value type:left |center |right |<coordinate>;Default value:0;Animatable:yes

refY

This attribute defines the y coordinate for the reference point of the marker.Value type:top |center |bottom |<coordinate>;Default value:0;Animatable:yes

viewBox

This attribute defines the bound of the SVG viewport for the current SVG fragment.Value type:<list-of-numbers>;Default value: none;Animatable:yes

DOM Interface

This element implements theSVGMarkerElement interface.

Examples

Drawing arrowheads

The following example shows how to draw an arrowhead on a line and on a curved path.For the curved path, an arrowhead is drawn at each point with amarker-mid marker.

html,body,svg {  height: 100%;}
html
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <!-- A marker to be used as an arrowhead -->    <marker           viewBox="0 0 10 10"      refX="5"      refY="5"      markerWidth="6"      markerHeight="6"      orient="auto-start-reverse">      <path d="M 0 0 L 10 5 L 0 10 z" />    </marker>  </defs>  <!-- A line with a marker -->  <line    x1="10"    y1="10"    x2="90"    y2="90"    stroke="black"    marker-end="url(#arrow)" />  <!-- A curved path with markers -->  <path    d="M 110 10       C 120 20, 130 20, 140 10       C 150 0, 160 0, 170 10       C 180 20, 190 20, 200 10"    stroke="black"    fill="none"    marker-start="url(#arrow)"    marker-mid="url(#arrow)"    marker-end="url(#arrow)" /></svg>

Drawing polymarkers

html,body,svg {  height: 100%;}
html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">  <defs>    <!-- Arrowhead marker definition -->    <marker           viewBox="0 0 10 10"      refX="5"      refY="5"      markerWidth="6"      markerHeight="6"      orient="auto-start-reverse">      <path d="M 0 0 L 10 5 L 0 10 z" />    </marker>    <!-- Dot marker definition -->    <marker           viewBox="0 0 10 10"      refX="5"      refY="5"      markerWidth="5"      markerHeight="5">      <circle cx="5" cy="5" r="5" fill="red" />    </marker>  </defs>  <!-- Coordinate axes with an arrowhead in both directions -->  <polyline    points="10,10 10,90 90,90"    fill="none"    stroke="black"    marker-start="url(#arrow)"    marker-end="url(#arrow)" />  <!-- Data line with polymarkers -->  <polyline    points="15,80 29,50 43,60 57,30 71,40 85,15"    fill="none"    stroke="grey"    marker-start="url(#dot)"    marker-mid="url(#dot)"    marker-end="url(#dot)" /></svg>

Using context fill and stroke

The following example shows how to use thecontext-fill andcontext-stroke values to make a marker use the same fill and stroke as the shape it is attached to.

html
<svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">  <marker       markerWidth="6"    markerHeight="6"    refX="3"    refY="3"    markerUnits="strokeWidth">    <circle cx="3" cy="3" r="2" stroke="context-stroke" fill="context-fill" />  </marker>  <style>    path {      marker: url("#circle");    }  </style>  <path d="M 10,10 30,10 h 10" stroke="black" />  <path d="M 10,20 30,20 h 10" stroke="blue" fill="red" />  <path d="M 10,30 30,30 h 10" stroke="red" fill="none" />  <path d="M 10,40 30,40 h 10" stroke="gray" fill="blue" stroke-width="1.5" /></svg>
html,body,svg {  height: 100%;}

Specifications

Specification
Scalable Vector Graphics (SVG) 2
# MarkerElement

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2026 Movatter.jp