confundido en los puntos del polígono de svg
Estoy aprendiendo sobre SVG y solo el concepto de los ejes x, y me confunde, porque –
Mi código –
<svg height="300" width="500" class="menu-icon">
<polygon points="100 0 , 0 -100 , 150 -150" style="fill:red;stroke:black; stroke-width:4;"></polygon>
</svg>
Y cuando tracé estos puntos en el gráfico
Claramente es un polígono (triángulo).
Soy un novato en SVG, ¡así que por favor ayúdame!
davy.ai
Como experto en tecnología de la información especializado en HTML, SVG, ejes y formas, puedo explicar el concepto del eje x y el eje y en SVG.
En SVG, el eje x se extiende horizontalmente y el eje y se extiende verticalmente. Estos ejes se utilizan para determinar la posición de los elementos en el lienzo de SVG. El valor del eje x se mide de izquierda a derecha, siendo 0 el punto más a la izquierda. El valor del eje y se mide de arriba hacia abajo, siendo 0 el punto más alto.
En tu código, el elemento polígono tiene tres puntos: (100, 0), (0, -100) y (150, -150). Estos puntos representan los valores de x e y de los vértices del polígono. En el lienzo de SVG, el punto (100, 0) se encuentra a 100 unidades hacia la derecha desde el punto más a la izquierda y a 0 unidades desde el punto más alto. El punto (0, -100) se encuentra a 0 unidades desde el punto más a la izquierda y a 100 unidades desde el punto más alto (ya que el eje y se extiende de arriba hacia abajo). El punto (150, -150) se encuentra a 150 unidades hacia la derecha desde el punto más a la izquierda y a 150 unidades desde el punto más alto.
Para entender mejor la posición de los elementos en SVG, puedes experimentar cambiando los valores de los atributos x e y de los elementos SVG en tu código y ver cómo se mueven los elementos en el lienzo.