Atributo de orientación SVG

El atributo de orientación muestra cómo se gira un marcador cuando se coloca en su posición en la forma. Solo el elemento < marcador > está usando este atributo.

Sintaxis:

orient = auto | auto-start-reverse | angle | number

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

auto: muestra que el marcador está orientado de tal manera que su eje x positivo apunta en una dirección relativa a la ruta en la posición en que se coloca el marcador.
auto-start-reverse: si este atributo se usa con el marcador de inicio, el marcador se orienta 180 ° diferente de la orientación que se usaría si se especificara auto.
ángulo: El ángulo especificado es la medida entre el eje x positivo de la forma y el marcador.
número: Muestra un ángulo en grados.

Los siguientes ejemplos ilustran el uso del atributo orient .

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-30 30 800 100" 
        xmlns="http://www.w3.org/2000/svg">
          
        <defs>
            <marker id="geek" viewBox="0 0 10 10" 
                refX="5" refY="5" markerWidth="7" 
                markerHeight="7" orient="90deg">
                  
                <path d="M 0 0 L 10 5 L 0 10 z" 
                    fill="green" />
            </marker>
        </defs>
  
        <polyline points="0, 40 40, 40 40, 80 80,
            80 80, 120 120, 120 120" 
            style="fill:white;stroke:green;" 
            marker-start="url(#geek)"
            marker-mid="url(#geek)" 
            marker-end="url(#geek)" />
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

<!DOCTYPE html>
<html>
  
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
  
    <svg viewBox="-30 0 800 100" 
        xmlns="http://www.w3.org/2000/svg">
      
        <defs>
            <marker id="arrow" 
                viewBox="0 0 10 10" 
                refX="5" refY="5" 
                markerWidth="7" 
                markerHeight="7" fill="green"
                orient="auto-start-reverse">
  
                <path d="M 0 0 L 10 5 L 0 10 z" />
            </marker>
        </defs>
  
        <polyline points="2, 2 2, 60 60, 90"
            fill="none" stroke="green" 
            marker-start="url(#arrow)"
            marker-end="url(#arrow)" />
    </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 Cancelar la respuesta