Atributo de puntos SVG

El atributo de puntos describe una lista de puntos para el elemento de polígono o polilínea. Si contiene un par impar de coordenadas, se ignorará la última. 

Elementos que utilizan este atributo:

  • elemento <polilínea>
  • elemento <polígono>

Sintaxis:

points = numbers

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

  • números: Es el par de enteros separados por una coma y un grupo de coordenadas separadas por un espacio que representa una coordenada X y una Y en el sistema de coordenadas del usuario. Su valor por defecto se considera como ninguno.

Los siguientes ejemplos ilustran el uso del atributo de puntos .

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green;">
        <h1>
            GeeksforGeeks
        </h1>
  
        <h4 style="color: black;">
            Using Polyline element
        </h4>
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg">
            <polyline stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/>
        </svg>
    </div>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <div style="color: green;">
        <h1>
            GeeksforGeeks
        </h1>
  
        <h4 style="color: black;">
            Using Polygon element
        </h4>
  
        <svg viewBox="100 0 520 100" 
            xmlns="http://www.w3.org/2000/svg">
            <polygon stroke="green" fill="none"
                points="100,100 150,25 150,75 200,0"/>
        </svg>
    </div>
</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 *