Marcadores

facebook-svg gplus-svg twitter-svg

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.