El elemento <marker> en SVG se usa para definir los gráficos que se usan principalmente para dibujar. Puede usarse en gráficos, tablas para hacer puntas de flecha y polimarcadores en un camino determinado.
Sintaxis:
<marker></marker refX="" viewbox="" refY="" markerWidth="" markerHeight="" orient="">
Valores de propiedad: este elemento contiene las siguientes propiedades:
- refX: Da la referencia para la coordenada x del marcador.
- refY: Da la referencia para la coordenada y del marcador.
- viewbox: Viewbox brinda detalles sobre el límite de la ventana gráfica SVG para el SVG actual.
- orient: Define la orientación del marcador.
- markerWidth: este atributo define el ancho de la ventana gráfica del marcador.
- markerHeight: este atributo define la altura de la ventana gráfica del marcador.
A continuación se dan algunos ejemplos de la función dada anteriormente.
Ejemplo 1:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</style>
<body>
<svg>
<defs>
<marker id="arrow"
refX="5"
refY="5"
markerWidth="10"
markerHeight="16"
orient="auto-start-reverse">
<path d="M 0 0 L 8 5 L 0 11 z" />
</marker>
<marker id="dot"
refX="5"
refY="5"
markerWidth="15"
markerHeight="15">
<rect width="5"
height="5"
x="2"
y="4"
fill="white" />
</marker>
</defs>
<polyline points="30, 10 30, 120 150, 120"
fill="none"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<polyline points="30, 120 80, 40 152, 80"
fill="none"
stroke="red"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
path1tent="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
svg{
width: 200px;
height: 200px;
color: black;
background-color: green;
}
</style>
<body>
<svg>
<defs>
<marker id="arrow"
refX="5"
refY="5"
markerWidth="10"
markerHeight="16"
orient="auto-start-reverse">
<path d="M 0 0 L 8 5 L 0 11 z" />
</marker>
<marker id="dot"
refX="5"
refY="5"
markerWidth="15"
markerHeight="15">
<rect width="5"
height="5"
x="2"
y="4"
fill="white" />
</marker>
</defs>
<polyline points="30, 10 30, 150 150, 150"
fill="blue"
stroke="black"
marker-start="url(#arrow)"
marker-end="url(#arrow)" />
<polyline points="40, 120 80, 80 100, 90 120, 120 120, 40 150, 20"
fill="none"
stroke="red"
marker-start="url(#dot)"
marker-mid="url(#dot)"
marker-end="url(#dot)" />
</svg>
</body>
</html>
Producción:
