Marcadores
El elemento <marker>
( marcador ) se utiliza para marcar el principio ( marker-start
) el medio ( marker-mid
) y/o el fin ( marker-end
) de un trazado SVG ( path
, line
, polyline
o polygon
).
Definir un marcador
Para definir un marcador utilizamos el elemento <marker>
. Dentro del elemento <marker>
aparece el trazado o los trazados que dibujan el marcador. Por favor observe que el marcador tiene un id
para poder referenciarlo más tarde.
<marker id="circulo" >
<circle r="2" fill="#6ab150" stroke="green" />
</marker>
Un marcador aparece en pantalla solo si lo utilizamos como tal, y aunque no aparezca por sí solo en un documento, es mejor ponerlo dentro del elemento <defs>
.
Utilizar un marcador
Un marcador <marker>
es como un pequeño símbolo: una caja que puede tener un atributo viewBox
para definir el origen y el tamaño del viewPort del marcador.
A diferencia de <symbol>
para utilizar un marcador no necesitamos un elemento <use>
sino que lo aplicamos a los trazados mediante los atributos marker
<line points="..." marker-mid="url(#circulo)" />
o en CSS utilizando las propiedades marker
:
line{ marker-mid: url(#circulo);}
Los marcadores
Un marcador puede aparecer al inicio de un trazado (marker-start
), al final de un trazado (marker-end
) o en el medio del trazado (marker-mid
) a los puntos de inflexión.
La propiedad abreviada marker
establece el mismo marcador para el inicio, el final y el medio del trazado, y a diferencia de las demás propiedades (marker-start
, marker-end
y marker-mid
) puede ser utilizada solo en el CSS.
path{ marker: url(#marcador); }
Los elementos SVG que soportan marcadores son: <path>
, <line>
, <polyline>
y <polygon>
.
También podemos utilizar marcadores para grupos de trazados. En este caso los trazados del grupo tendrán todos el mismo tipo de marcadores.
Algunos atributos especificos:
A continuación algunos atributos especificoe del elemento <marker>
: markerWidth
,
markerHeight
,
markerUnits
,
orient
,
refX
,
refY
,
viewBox
.
El atributo markerUnits
Por defecto los marcadores son redimensionados en función del grosor del trazado (stroke-width
). Para que esto no pase podemos utilizar el atributo markerUnits
.
El atributo markerUnits
puede tomar como valor una de estas dos palabras calve: userSpaceOnUse
o strokeWidth
.
El valor por defecto de markerUnits
es strokeWidth
lo que significa que la anchura y la altura del marcador es relativa al grosor del trazado stroke-width
.
See the Pen svg marker stroke-width*** by Gabi (@enxaneta) on CodePen.
El atributo orient
El atributo orient
indica como hay que girar el marcador para que tenga la orientación deseada y puede tomar como valor una de las plabras clave auto
, auto-start-reverse
un angulo (orient = "34deg"
) o un número (orient = "34"
) que representa el valor del angulo en grados sexagesimales.
orient = auto | auto-start-reverse | <angulo> | <numero>
Si orient = "auto"
el angulo del eje X del marcador es igual al pormedio de los angulos del sector anterior y posterior del trazado. Esto es muy útil en el caso de marker-start
y marker-end
donde hay un solo sector a tener en cuenta y el marcador tiene el mismo angulo que el trazado. Sin embargo en el caso de marker-mid
sobre todo en <polyline>
y <polygon>
utilizar orient = "auto"
puede producir resultados poco esteticos.
See the Pen orient="auto" en polylines by Gabi (@enxaneta) on CodePen.
Para estos casos podemos dar a orient un valor en grados sexagesimales, por ejemplo: orient="65deg"
o orient="65"
.
Si queremos que el marker-start
tenga la orientación contraria a la del marker-end
podemos utilizar la palabra clave auto-start-reverse
See the Pen orient="auto-start-reverse" by Gabi (@enxaneta) on CodePen.
Los atributos markerWidth y markerHeight
Por defecto un marcador tiene una anchura y una altura de 3 unidades y el origen en la esquina izquierda arriba del rectángulo de 3x3.
Todo lo que sale de la caja no aparece pintado en pantalla almenos que utilizamos overflow="visible"
.
Observación: utilizar overflow="visible"
no es muy eficiente y es mejor evitarlo.
Si queremos que el marker
tenga otras dimensiones, las podemos especificar utilizando markerWidth
y markerHeight
See the Pen markerWidth y markerHeight"*** by Gabi (@enxaneta) on CodePen.
Los atributos refX y refY
Si miramos con atención el ejemplo anterior, el resultado no es muy satisfactorio. Los pequeños circulos están anclados al trazado por el punto {x:0,y:0}. Sería mucho más interesante poder anclarlos por el centro del circulo. Para esto podemos utilizar los atributos refX
y refY
que permiten especificar las coordenadas del punto de anclaje, por ejemplo refX="5" refY="5"
<marker id="circulo" markerWidth="10" markerHeight="10" refX="5" refY="5">
El atributo viewBox
Exactamente como los symbolos, los marcadores pueden tener un atributo viewBox
. Si utilizamos viewBox
podemos cambiar el origen de la caja del marcador a coordenadas negativas sin necesidad de utilizar overflow="visible"
.
<marker id="circulo" viewBox="-5 -5 10 10" markerWidth="10" markerHeight="10" >
Y si no especificamos los puntos de referencia refX
y refY
el punto de anclaje del marcador siguie el punto {x:0,y:0}
, o sea en el centro del marcador.
El atributo paint-order
Los trazados SVG pueden tener un atributo paint-order
que controla el orden en el cual son pintados el fill
, el stroke
, y los marcadores. El valor por defecto de paint-order
es fill stroke markers
. Esto quiere decir que el primer componente a dibujar es el relleno fill
seguido por el stroke
y los marcadores.
Si paint-order: markers
, el SVG pinta primero los marcadores seguidos por el fill
y el stroke
:
See the Pen paint-order="markers"*** by Gabi (@enxaneta) on CodePen.
Por favor lea acerca del atributo paint-order.