Marcadores SVG: crea puntas de flecha personalizadas que se mantengan alineadas

Para añadir una punta de flecha personalizada a un trazado SVG, define su ilustración dentro de un <marker> y referencia su ID mediante marker-end. Establece refX y refY en el punto de la ilustración que debe coincidir con el extremo del trazado. Después elige si el marcador debe girar con el trazado y crecer con su grosor.

Estas decisiones resuelven problemas distintos. Una flecha puede apuntar en la dirección correcta y aun así no coincidir con su extremo. También puede alinearse bien sobre un trazo fino y volverse demasiado grande cuando la línea se engrosa. Este recorrido separa posición, dirección y tamaño mediante una forma original de puntero.

Empieza con un SVG pequeño y completo

Guarda lo siguiente como markers.svg y ábrelo en un navegador. El puntero es un ejemplo creado manualmente, con la punta en (11, 6) dentro de un espacio de coordenadas de 12 × 12. No es un resultado de conversión de PerfectVector.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180">
  <defs>
    <marker id="pv-pointer" viewBox="0 0 12 12"
      refX="11" refY="6" markerWidth="6" markerHeight="6"
      markerUnits="strokeWidth" orient="auto-start-reverse">
      <path d="M1 1 L11 6 L1 11 L4 6 Z" fill="#087f82"/>
    </marker>
  </defs>
  <g fill="none" stroke="#20364d" stroke-width="4"
    marker-start="url(#pv-pointer)" marker-end="url(#pv-pointer)">
    <path d="M50 45 H350"/>
    <path d="M50 135 C130 75,260 195,350 135"/>
  </g>
</svg>

El primer trazado es recto; el segundo es una curva. Ambos referencian el mismo marcador en los dos extremos. El bloque <defs> almacena la definición, mientras que las referencias de los trazados la hacen visible. La referencia de marker de MDN cubre las propiedades de colocación al inicio, en el medio y al final.

Usa un ID único en el documento que lo contiene. Si combinas varios SVG en línea, añade prefijos a sus IDs de marcadores y actualiza todas las referencias url(#...) correspondientes. La guía de sprites de símbolos SVG explica el mismo problema de gestión de referencias para iconos reutilizados.

Coloca el punto previsto sobre el extremo

refX="11" refY="6" indica qué punto de la ilustración del marcador debe coincidir con el extremo del trazado. No mueve el propio trazado. En este ejemplo, ese punto es la punta afilada.

Compáralo con refX="0" refY="0". El navegador coloca el origen de coordenadas del marcador sobre el extremo, dejando la punta más a la derecha y más abajo en una línea horizontal. Aumentar el tamaño del marcador hace más visible el error; no corrige el anclaje.

MDN documenta refX y refY como las coordenadas del punto de referencia del marcador. Interprétalas según las propias coordenadas de la ilustración, incluido su viewBox, en lugar de estimarlas a partir de la anchura mostrada.

Abrimos el SVG completo por separado y renderizamos la comparación en un navegador. Cambiar el punto de referencia colocó la punta sobre la cruz naranja. Cambiar la orientación invirtió la flecha inicial. Cambiar el modo de unidades controló si el puntero crecía con la línea. Estas observaciones se aplican a este ejemplo; inspecciona el archivo exportado real en la aplicación que lo recibirá.

Una punta anclada exactamente en el extremo también deja que el trazo llegue hasta ese punto. En una línea gruesa, parte del trazo puede seguir visible junto a una punta estrecha, como muestra la comparación. Si esa unión importa, ajusta conjuntamente el motivo, el anclaje o el extremo del trazado e inspecciona la unión. La colocación del marcador no recorta el trazo subyacente.

Deja que la curva controle la dirección

Para una punta de flecha al final de un trazado, orient="auto" sigue la dirección del trazado en ese punto. La dirección final de una curva procede de su tangente local, por lo que la flecha no tiene que apuntar en la dirección de la recta entre los dos extremos del trazado.

Para flechas en ambos extremos, usa orient="auto-start-reverse". Se comporta como auto al final, pero gira el marcador inicial 180 grados adicionales. La documentación de orient de MDN lo describe como la forma de reutilizar una punta de flecha que apunta hacia fuera desde ambos extremos.

La comparación superior derecha muestra la diferencia: con auto, el puntero inicial mira a lo largo de la curva. Con auto-start-reverse, mira hacia fuera del inicio. No necesitas una segunda copia de la forma invertida manualmente.

Comprueba la dirección del trazado cuando el resultado te sorprenda. Invertir un trazado cambia qué extremo es el inicio. Una flecha destinada a indicar un flujo debe colocarse según esa dirección, aunque los dos extremos ocupen las mismas posiciones de pantalla que antes.

Decide si el grosor de línea debe cambiar el tamaño del marcador

markerUnits establece el sistema de coordenadas usado para las dimensiones y el contenido del marcador. Su valor predeterminado es strokeWidth; la alternativa es userSpaceOnUse. Consulta la referencia de markerUnits de MDN para conocer la diferencia.

El puntero ocupa 10 de las 12 unidades horizontales de su viewBox. Con markerWidth="6" y markerUnits="strokeWidth", su anchura sin girar es 10 / 12 × 6 × stroke-width: 20 unidades de usuario en el trazo de 4 unidades y 40 en el de 8. La comparación inferior izquierda usa esos ajustes.

Para mantener ese puntero con 20 unidades de anchura en ambos grosores, cambia la definición a:

markerUnits="userSpaceOnUse" markerWidth="24" markerHeight="24"

La comparación inferior derecha usa esos valores. Mantener markerWidth="6" y cambiar solo el modo de unidades produciría un puntero mucho más pequeño, porque las seis unidades ya no se multiplicarían por la anchura del trazo.

userSpaceOnUse no significa un número fijo de píxeles de pantalla. Escalar el SVG circundante o su sistema de coordenadas puede seguir cambiando el tamaño mostrado. Inspecciona el marcador al tamaño final de la composición, sobre todo cuando un motivo grande se reduce a una pequeña anotación de diagrama.

Prepara un motivo personalizado antes de convertirlo en marcador

Para un triángulo o un puntero sencillo, dibuja directamente el trazado. Para ilustraciones vectoriales existentes, conserva los trazados originales y decide qué coordenada debe unirse a la línea. Conserva los huecos intencionados, simplifica los detalles que desaparecen al tamaño previsto y da suficiente espacio a la ilustración dentro del área visible del marcador.

Si una punta de flecha o un motivo decorativo personalizados solo existen como PNG o JPG, el flujo de imagen a vector de PerfectVector puede ayudar a recuperar una primera versión SVG antes de este paso de preparación. Compara la silueta y las pequeñas aberturas con el original, elimina cualquier forma de fondo no deseada y elige los límites y el punto de anclaje de la ilustración aprobada. La conversión no crea definiciones de marcadores, no asigna la dirección del trazado ni añade comportamiento de conectores de diagrama.

Mantén los colores explícitos durante las pruebas. Este ejemplo usa un marcador verde azulado y una línea azul marino para que su límite siga visible. Si tu flecha debe tener un único color, establece ambas pinturas expresamente e inspecciona el resultado entregado. La guía de edición de color SVG cubre los rellenos y estilos fijos que pueden interferir al cambiar el color.

Comprueba el archivo donde se utilizará

Conserva un archivo maestro editable y prueba una copia de entrega en el sitio web, editor o flujo de exportación reales. Una vista previa correcta en el navegador demuestra el aspecto de ese archivo en el navegador; no demuestra el comportamiento de importación de todas las aplicaciones.

• Confirma que cada url(#...) apunta al ID de marcador previsto después de empaquetar u optimizar.
• Comprueba trazados rectos y curvos, incluido un marcador inicial si lo usas.
• Compara los grosores de línea mínimo y máximo del diseño.
• Inspecciona la punta, la unión y cualquier ilustración recortada al tamaño final de visualización.
• Vuelve a abrir el SVG entregado de forma independiente y compáralo con la vista previa original.

Los marcadores son decoraciones visibles asociadas a posiciones de trazados. No crean conexiones semánticas entre objetos de diagramas. Para los puntos de conexión y el comportamiento de plantillas de un editor de diagramas, usa su sistema nativo de formas; la guía de formas personalizadas de draw.io cubre esa tarea independiente.

Un marcador tampoco es automáticamente un contorno de corte físicamente unido. Si el destino necesita geometría cerrada de corte, prepara e inspecciona una copia de entrega independiente basada en trazados en un editor vectorial. Una línea y una punta que se superponen en pantalla no demuestran que exista un contorno unido. Otras guías de preparación SVG cubren la limpieza de ilustraciones y las comprobaciones posteriores.

Preguntas frecuentes

¿Por qué mi punta de flecha SVG está desplazada respecto a la línea? Comprueba refX y refY según las coordenadas de la ilustración del marcador. Identifican el punto colocado sobre el extremo del trazado. En este ejemplo, la punta está en 11,6; usar 0,0 coloca allí el origen.

¿Cómo reutilizo una punta de flecha en ambos extremos? Referencia el mismo marcador con marker-start y marker-end y usa orient="auto-start-reverse". La instancia inicial se invierte mientras que la final sigue la dirección del trazado.

¿Por qué crece mi punta de flecha cuando engroso la línea? El valor predeterminado de markerUnits es strokeWidth. Usa userSpaceOnUse cuando el marcador deba conservar su tamaño en las coordenadas de usuario del elemento y ajusta markerWidth y markerHeight para ese sistema de unidades.

¿Un marcador convierte la flecha en un único trazado cerrado? No. La definición del marcador sigue separada del trazado que la referencia. Prepara e inspecciona geometría realmente unida si un flujo posterior de corte o edición la requiere.

Fuentes

1. MDN — marker — Definiciones de marcadores, formas compatibles y propiedades de colocación.
2. MDN — refX — Colocación horizontal del punto de referencia en el sistema de coordenadas del marcador.
3. MDN — refY — Colocación vertical del punto de referencia en el sistema de coordenadas del marcador.
4. MDN — orient — Rotación automática e inversión de la instancia inicial.
5. MDN — markerUnits — Tamaño relativo al trazo y tamaño en coordenadas de usuario.

Empieza con un motivo y comprueba su anclaje, dirección y tamaño tanto en una línea como en una curva. Si tu motivo solo existe como imagen rasterizada, prepara una primera versión SVG, inspecciona su silueta y aberturas y convierte después los trazados aceptados en un marcador.