SVG => marcador

Sintaxis

<marker viewBox = " xy width height " refX = " xoffset " refY = " yoffset " orient = " orientación " ... parámetros opcionales >
... elementos dibujando el marcador ...
</marker >
< elementname marker-start = "url (# markerid )" /> aplica un marcador al inicio de un elemento
< elementname marker-mid = "url (# markerid )" /> aplica un marcador a la mitad de un segmento de un elemento
< elementname marker-end = "url (# markerid )" /> aplica un marcador al final de un elemento
Los marcadores se pueden aplicar a los elementos <line> , <polyline> , <polygon> y <path>

Parámetros

Parámetro	Detalles
viewBox	Especifica el sistema de unidades para los elementos que dibujan el marcador.
refX	Distancia del eje x del sistema de coordenadas para dibujar el marcador debe estar desplazado del punto de dibujo predeterminado. El valor predeterminado es 0.
refi	Distancia del eje y del sistema de coordenadas para dibujar el marcador debe estar desplazado del punto de dibujo predeterminado. El valor predeterminado es 0.
orientar	Los valores son `auto` o de `angle in degrees` y especifican la rotación aplicada al marcador. Se aplica después de realizar todos los demás ajustes de coordenadas (viewBox, preserveAspectRaio y refX, refY). El valor predeterminado es 0. El cálculo del ángulo para `auto` es complejo: consulte la especificación SVG para obtener más detalles.
markerUnits	`strokeWidth` o `userSpaceOnUse` . Predeterminado a `strokeWidth` .
marcador Ancho	Ancho del marcador en markerUnits. El valor predeterminado es 3.
marcadorHeight	Altura del marcador en markerUnits. El valor predeterminado es 3

Observaciones

Secuencias de comandos: los elementos marcadores representados no se exponen en el DOM, por lo que es imposible ajustar las propiedades o los elementos para marcadores representados específicos (aunque es completamente posible crear secuencias de comandos del elemento marcador definido).

La propiedad de overflow del elemento marcador se establece automáticamente en hidden . Esto es lo que recorta cualquier dibujo que desborda el marcador. Esto se puede establecer explícitamente como visible en CSS. A partir de julio de 2016, Chrome no admite marcadores con overflow: visible , pero una solución es establecer un filtro en el elemento marcador, que parece deshabilitar el recorte de desbordamiento.

Los filtros se pueden aplicar a los elementos dentro de un marcador. Aunque no está explícitamente permitido en la especificación, los filtros también parecen funcionar cuando se especifican en el elemento marcador.

Para obtener más detalles sobre el elemento marcador, consulte la sección de marcadores en la especificación SVG 1.1 .

Marcador basico

Este es un ejemplo de un marcador final especificado con un número mínimo de parámetros. Tenga en cuenta que el marcador no hereda el color del trazo del elemento original.

<svg width="800px" height="600px">
<defs>
      <marker id="examplemarker"
        viewBox="0 0 10 10" 
        refX="0" refY="5" 
        orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>
  </defs>
  
  <line x1="20" y1="20" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#examplemarker)" />
</svg>

Efectos de valores alternativos para refX, refY y orient

Las compensaciones de eje para dibujar el marcador que se especifican mediante refX y refY se aplican antes de la rotación especificada por el parámetro orient . A continuación puede ver los efectos de varias combinaciones de orient y refX , refY para ilustrar esto.

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="0" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="20" refY="20" orient="0" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="20" refY="20" orient="180" >
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />
  
  <text x="20" y="150"> refX,Y  (0,5) orient (auto) </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />
  
    <text x="220" y="150"> refX,Y  (0,0) orient (0) </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />
  
      <text x="20" y="390"> refX,Y  (20,20) orient (0) </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />
  
      <text x="220" y="390"> refX,Y  (20,20) orient (180) </text>
</svg>

Efectos de valores alternativos para las Unidades de marcadores, Ancho de marcador, Ancho de marcador

El valor predeterminado para los marcadores de dibujo es utilizar el ancho del trazo del elemento de llamada, pero puede especificar explícitamente que los marcadores se dibujen utilizando el sistema de unidades para el elemento al que se aplica el marcador especificando markerUnits="userSpaceOnUse" . Los marcadores se dibujan en un cuadro de 3x3 markerUnits (3 strokewidths si no se especifican markerUnits). Pero el ancho y el alto del cuadro se pueden especificar explícitamente con markerHeight y markerWidth . Vea a continuación los efectos de varias combinaciones de markerUnits , markerHeight y markerWidth .

<svg width="800px" height="600px">
<defs>
      <marker id="marker1"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="1" markerHeight="1">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker2"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4" markerHeight="4">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker3"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="15" markerHeight="15">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
      <marker id="marker4"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto" markerUnits="userSpaceOnUse" markerWidth="30" markerHeight="30">
      <path d="M 0 0 L 10 5 L 0 10 z" />
                                     </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker1)" />     
    <text x="20" y="150"> markerUnits = strokeWidth </text>
    <text x="20" y="170"> markerWidth|Height = 1 </text>
  
  <line  x1="220" y1="20" x2="300" y2="100" stroke-width="8" stroke="blue" marker-end="url(#marker2)" />      
    <text x="250" y="150"> markerUnits = strokeWidth </text>
    <text x="250" y="170"> markerWidth|Height = 4 </text>
  
  <line  x1="20" y1="220" x2="100" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker3)" />      
      <text x="20" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="20" y="410"> markerWidth|Height = 15 </text>
  
  <line  x1="220" y1="220" x2="300" y2="300" stroke-width="8" stroke="blue" marker-end="url(#marker4)" />      
      <text x="250" y="390"> markerUnits = userSpaceOnUse </text>
      <text x="250" y="410"> markerWidth|Height = 30 </text>
</svg>

Marcadores de inicio, medio y final en línea, polilínea, polígono y elementos de trayectoria.

Los elementos pueden especificar marcadores de inicio, medio y final por separado. A continuación, se incluyen ejemplos de marcadores de inicio, medio y final para todos los elementos que se pueden marcar. Tenga en cuenta que Chrome actualmente (julio de 2016) no calcula correctamente la orientación automática para los marcadores de inicio y fin de los polígonos ( error # 633012 ), y tampoco coloca correctamente los marcadores centrales para los segmentos de la trayectoria del arco ( error # 583097 )

<svg width="800px" height="600px">
<defs>
      <marker id="red-chevron"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <path d="M 0 0 L 10 5 L 0 10" fill="none" stroke="red" />
      </marker>

      <marker id="black-arrow"
      viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
         <path d="M 0 0 L 10 5 L 0 10 z" />
      </marker>

      <marker id="red-circle"
      viewBox="0 0 10 10" refX="5" refY="5" orient="auto" >
         <circle fill="red" cx="5" cy="5" r="5" />
      </marker>
  </defs>
  
  <line  x1="20" y1="20" x2="100" y2="100" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
  <text x="20" y="150"> line: marker-mid not applied</text>
  
  <polyline  points="220,20 300,100 400,20" fill="none" stroke-width="8" stroke="blue" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" />
    <text x="250" y="150"> polyline </text>
   
  <polygon  points="20,190 100,200 150,300 100,350 20,260" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)" fill="none" stroke-width="5" stroke="black" />
   <text x="20" y="390"> polygon: end/start overlap </text>
      
  <path d="M250,350 l 25,-25 
        a15,5 -16 0,1 10,-15 l 20,-5 
        a15,10 -16 0,1 10,-15 l 20,-5 
        a15,25 -16 0,1 10,-15 l 20,-5 
        a15,35 -16 0,1 10,-15 l 20,-5"
        fill="none" stroke="green" stroke-width="2" marker-start="url(#red-chevron)" marker-end="url(#black-arrow)" marker-mid="url(#red-circle)"  />
      <text x="250" y="390"> path with arc segments </text>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

SVG
marcador

Buscar..