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>. El trazado que aparece dentro representa el marcador.

<marker id="flecha" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto"
 fill="none" stroke="black">
<path d="M 0 0 L 4 3 L 0 6" />
</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>.

Un marcador es un rectángulo transparente dentro del cual aparece el símbolo utilizado como marcador. Los atributos markerWidth y markerHeight controlan la anchura y la altura de este rectángulo.

<marker id="flecha" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto"
 fill="none" stroke="black">
<path d="M 0 0 L 4 3 L 0 6" />
</marker>

Si no especificado de otra manera, el marcador se conecta al trazado por su esquina izquierda arriba. En la mayoría de los casos no es lo que queremos. Para rectificar, echaremos mano de otros dos atributos: refX y refY. Estos dos atributos representan las coordenadas del punto de referencia por el cual el marcador se conecta al trazado.

<marker id="flecha" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto"
 fill="none" stroke="black">
<path d="M 0 0 L 4 3 L 0 6" />
</marker>

El atributo orient indica como hay que girar el marcador para que tenga la orientación deseada.
Si orient = "auto", el SVG calcula el ángulo para que el eje x del marcador tenga la misma orientación que el trazado que marcamos.

<marker id="flecha" markerWidth="6" markerHeight="6"  refX="4" refY="3" orient="auto"
 fill="none" stroke="black">
<path d="M 0 0 L 4 3 L 0 6" />
</marker>

Si no nos gusta el resultado, podemos indicar al SVG el ángulo de rotación deseado.

En el siguiente ejemplo definimos como marcador una punta de flecha. Observamos que la punta cambia de orientación y también de tamaño ( en función del valor de stroke-width ).



  
    
      
    
  

  
  

Los marcadores de tipo marker-mid

Los marcadores de tipo marker-mid aparecen al principio y al fin ce cada segmento de una polilínea ( polyline ) o de un trazado ( path ).

Veamos un ejemplo:

Para marcar los puntos de inflexión de una polilínea creamos un marcador circular utilizando un elemento <circle>.

<marker id="circulo" markerWidth="4" markerHeight="4" refX="2" refY="2">
	<circle r="2" cx="2" cy="2" fill="#6ab150"  />   
</marker>

El  marcador tiene una anchura y una altura de 4 unidades ( markerWidth="4" markerHeight="4" ), y se conecta al trazado por su centro ( refX="2" refY="2" ).

Pero lo podemos hacer mejor. Utilizando overflow="visible", un circulo con el centro en el origen del marcador será completamente visible. En este caso ya no necesitamos especificar las coordenadas del centro del circulo ( que por defecto son cx="0" cy ="0" ), ni las dimensiones del marcador, que por defecto son markerWidth="3" y markerHeight="3". Tampoco necesitamos especificar los atributos refX y refY, ya que por defecto el marcador se conecta al trazado por su esquina derecha arriba – ahora el centro del circulo.

<marker id="circulo" overflow="visible" >
	<circle r="2" fill="#6ab150"  />   
</marker>

See the Pen SVG marker #1 by Gabi (@enxaneta) on CodePen.

En el ejemplo anterior hemos utilizado marker-mid como atributo presentacional. Tambien lo podemos utilizar como propiedad CSS:

<polyline points=". . . " 
          style=". . .; marker-mid:url(#circulo);">
</polyline>

Todavía más: a diferencia de los atributos presentacionales en CSS existe una forma abreviada para especificar todos los tipos de marcadores en una sola declaración:

<polyline points=". . . " 
          style=". . .; marker:url(#circulo);">
</polyline>

¡Ojo! la propiedad marker puede ser utilizada solo en CSS y NO como atributo presentacional.

See the Pen SVG marker #2 by Gabi (@enxaneta) on CodePen.