Atributo de ancho de marcador SVG

El atributo markerWidth indica el ancho de la ventana gráfica dentro de la cual se ajustará el <marcador> cuando se muestre de acuerdo con los atributos preserveAspectRatio y viewBox. Solo el elemento <marker> está usando este atributo.

Sintaxis:

markerWidth = "length-percentage" | "number"

Valores de atributo: el atributo markerWidth acepta los valores mencionados anteriormente y descritos a continuación. 

  • porcentaje de longitud: indica un ancho relativo o absoluto del marcador.
  • number: Indica el ancho del marcador en las unidades definidas por el atributo markerUnits .

Nota: El valor predeterminado del atributo markerWidth es 3.

Ejemplo 1: a continuación se muestran los ejemplos que ilustran el uso del atributo markerWidth .

HTML

<!DOCTYPE html>
<html>
  
    <body>
        <h1 style="color: green; 
            margin-left: 10px;">
            GeeksforGeeks
        </h1>
  
        <svg viewBox="-20 -5 1220 520" 
             xmlns="http://www.w3.org/2000/svg">
             <defs>
                <marker id="geek" 
                    markerWidth="2.5" 
                    markerHeight="2.5" 
                    refX="1.5" 
                    refY="1.5">
                   <circle cx="6" cy="6" r="10" 
                    stroke="none" fill="yellow"/>
                </marker>
              </defs>
  
            <polyline points="20, 20 40, 25 60,
                    40 80, 120 120, 140 200, 180"
                    style="fill:none;stroke:green;
                    stroke-width:5" 
                    marker-mid="url(#geek)"/>
          </svg>
    </body>
     
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
    <body>
        <h1 style="color: green; 
            margin-left: 10px;
            font-size: 25px;">
            GeeksforGeeks
        </h1>
  
        <svg viewBox="0 15 1220 520" 
             xmlns="http://www.w3.org/2000/svg">
            <defs>
                <marker id="geek"
                    viewBox="0 0 10 10"
                    refX="5" refY="5"
                    markerUnits="strokeWidth"
                    markerWidth="10"
                    markerHeight="8"
                    orient="auto">
                   <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="#008000"/>
                </marker>
            </defs>
  
            <polyline points="100, 105 180,
                    20 100, 17 50, 100"
                    stroke="green" 
                    stroke-width="5"
                    fill ="none"
                    marker-start="url(#geek)"/>
          </svg>
    </body>
     
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por thacker_shahid y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *