Marcador <marker> de SVG

Las etiquetas SVG se utilizan para el inicio, el medio y el final de las líneas o rutas. Por ejemplo, se puede usar una etiqueta circular o cuadrada como punto de partida de una ruta de etiqueta, y una etiqueta de flecha como punto de llegada de una ruta de etiqueta. El elemento marker define las flechas o gráficos de etiqueta poligonales que se dibujan en elementos <path>, <line>, <polyline> o <polygon> específicos

Ejemplo en línea de Marcador

Este es un ejemplo visual simple que muestra el aspecto de los marcadores:

Los marcadores se crean utilizando elementos <marker>. Los elementos <marker> deben estar anidados dentro de un elemento <defs>. El elemento <defs> generalmente reserva un grupo de definiciones reutilizables para las imágenes SVG.
Este es el código SVG del ejemplo gráfico superior:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerCircle" markerwidth="8" markerheight="8" refx="5" refy="5">
　　　　　　　　　　　　<circle　cx="5"　cy="5"　r="3" style="stroke: none; fill:#000000;"></circle>
　　　　　　　　</marcador>
　　　　　　　　<marker id="markerArrow" markerwidth="13" markerheight="13" refx="2" refy="6" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,11　L10,6　L2,2" style="fill: #000000;"></path>
　　　　　　　　</marcador>
　　　　</defs>
　　　　<path d="M100,10　L150,10　L150,60" style="stroke: #6666ff; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerCircle);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　">"</path>
</svg>

Por favor, tenga en cuenta que el elemento <defs> contiene dos elementos <marker>. Estos dos elementos <marker> definen los marcadores de inicio y final que se muestran en la imagen superior.
En segundo lugar, nota cómo el elemento <path> utiliza mark-start y marker-La propiedad end CSS hace referencia a dos elementos <mark> desde su propiedad style. Esto es la forma de especificar qué marcador se debe usar para una ruta dada. Hablaré de esto más adelante.

Definir marcador

Puedes definir un marcador utilizando el elemento <marker>. Este es un ejemplo:

<marker　id="markerCircle"　markerWidth="8"alturaDeMarcador="8"refX="5"refY="5">
　　　　<circle　cx="5"　cy="5"　r="3"estilo="sin trazo; relleno:#000000;"/>
</marcador>

Este ejemplo define un ancho de8(markerWidth=“8”）、高度为8(markerHeight=“8）的标记。 由于标记 es un elemento gráfico separado, se debe establecer explícitamente el ancho y la altura.

La propiedad id del elemento <mark> se utiliza para referenciar este marcador desde el elemento <path>.

Las coordenadas refX y refY establecen el punto dentro del marcador que se utiliza como punto de referencia. El punto de referencia es el punto utilizado para ubicar el marcador en el inicio de la ruta. En este ejemplo, refX y refY se establecen en el centro del círculo, lo que significa que el centro del círculo se colocará en el punto de inicio de la ruta. Si no se establecen refX y refY, se假定它们 son 0, lo que colocará la esquina superior izquierda del marcador en el inicio de la ruta.

En el interior del elemento <marker> hay un elemento <circle>. El elemento circle se define como5,5centrado en el centro (cx y cy). El punto central es el centro del cuadro virtual del marcador. No es la posición real en la que se coloca en la imagen. Se puede establecer el tamaño del cuadro virtual en el elemento <marker> utilizando markerWidth y markerHeight8.8.

Orientación automática

Este es otro ejemplo de definición de <marker>. En este ejemplo, se define un triángulo utilizado como flecha de ruta.

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"alturaDeMarcador="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"ancho="5"altura="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marcador>
　　　　　　　　<marker id="markerArrow" markerWidth="13"alturaDeMarcador="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marcador>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

El elemento <path> dentro del elemento <marker> dibujará un triángulo con una punta apuntando a la derecha. Sin embargo, si la ruta no es una línea horizontal,则需要旋转三角形，使其适合使用它的路径的方向。可以通过将“方向”(orient)属性设定为“自动”(auto)来执行此操作。它将旋转<marker>元素内的形状以适合引用它的路径。

Las siguientes imágenes muestran cinco líneas con diferentes pendientes, todas ellas utilizan los dos mismos marcadores como marcador de inicio y marcador de final. Nota cómo los marcadores rotan automáticamente para adaptarse a la pendiente de la línea en la que se utilizan.

El efecto de ejecución es el siguiente:

Este es el resultado de establecer la propiedad orient del elemento <mark> en auto.

También se puede establecer el valor de la propiedad orient a un ángulo fijo (por ejemplo45Este valor rotará el marcador en ese ángulo al usarse. Sin embargo, esto es mucho menos útil que la función de orientación automática.

Referencia de marcadores desde el camino

Puede usar las siguientes propiedades CSS para referenciar un marcador desde un camino:

• marker-start

• marker-mid

• marker-end

Estas tres propiedades CSS asignan el marcador al punto de inicio, medio y final del camino.

Las propiedades CSS deben estar ubicadas en el atributo style del elemento <path> donde se utilizan. Puede referenciar el elemento <marker> utilizando su atributo id, como se muestra a continuación:

marker-start: url(#markerId);

markerId debe reemplazarse con el valor del atributo id del elemento <mark> que se desea referenciar.

Este es un ejemplo que utiliza todas las tres propiedades CSS:

<svg width="500" height="100">
　　　　<defs>
　　　　　　　　<marker id="markerSquare" markerWidth="7"alturaDeMarcador="7"refX="4"refY="4" orient="auto">
　　　　　　　　　　　　<rect x="1"y="1"ancho="5"altura="5" style="stroke: none; fill:#000000;"></path>
　　　　　　　　</marcador>
　　　　　　　　<marker id="markerArrow" markerWidth="13"alturaDeMarcador="13"refX="2"refY="7" orient="auto">
　　　　　　　　　　　　<path d="M2,2　L2,13　L8,7　L2,2" style="fill: #000000;" ></path>
　　　　　　　　</marcador>
　　　　</defs>
　　　　<path d="M100,20 l0,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M140,20 l25,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M180,20 l50,50"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M220,20 l50,25"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
　　　　<path d="M260,20 l50,0"
　　　　　　　　　　style="stroke: #0000cc; stroke-width:　1px; fill: none;
　　　　　　　　　　　　　　　　　　　　　　　marker-start: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　　　marker-end: url(#markerArrow);
　　　　　　　　　　　　　　　　　　　　　　　marker-mid: url(#markerSquare);
　　　　　　　　　　　　　　　　　　　　　"
　　　　　　　　　　　　></path>
</svg>

El resultado de la ejecución es el siguiente:

Referencia de marcadores desde otras formas

El elemento <path> no es el único que puede usar marcadores en SVG. 　 <line>, <polyline> y <polygon> también pueden usar marcadores. Operan de la misma manera que el elemento <path>: a través del inicio, el medio y el final del marcador (respectivamente: marker-start, marker-mid y marker-Se hace referencia al atributo id del elemento <marker> en la propiedad CSS end.

Unidad de marcador

Se puede ajustar el tamaño de la marca para que se ajuste al ancho de trazo del camino donde se utiliza. Aquí hay un ejemplo visual:

Al establecer el valor de markerUnits del elemento <marker> en strokeWidth, se puede lograr este efecto. En realidad, este es el valor predeterminado de esta propiedad, por lo que, incluso si no se establece la propiedad markerUnits, esto es el comportamiento predeterminado. Aquí está el aspecto del código SVG:

<marker id="markerSquare" markerWidth="7"alturaDeMarcador="7"refX="4"refY="4"
　　　　orientar="auto" markerUnits="strokeWidth">
　　　　<rect x="1"y="1"ancho="5"altura="5"estilo="sin trazo; relleno:#000000;"/>
</marcador>

Para evitar que la marca de auto-escala se ajuste para adaptarse al ancho del trazo del camino, configure la propiedad markerUnits en userSpaceOnUse. De esta manera, el marcador mantendrá su tamaño, independientemente del ancho del trazo del camino que utilice.