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 ( strokeWidth )



  
    
      
    
  

  
  

A continuación utilizamos tres marcadores diferentes para marcar el principio ( marker-start ) el medio ( marker-mid ) y el fin ( marker-end ) del trazado.