que - Ejemplos de polígonos dibujados por ruta vs polígono en SVG

xlink href#user

Question

Me gustaría aprender SVG y estoy tratando de aprender cómo se puede representar la misma imagen usando el punto (con polígono) o dinámicamente por caminos (ruta).

Me gustaría algunos ejemplos del mismo polígono (el triángulo, el cuadrado y el pentágono son suficientes para comenzar) en el polígono SVG Y la ruta SVG, para poder comparar el código. Puedo encontrar imágenes individuales dibujadas por cualquiera, pero ninguna que sea la MISMA.

Answer 1

Es trivial: básicamente puedes tomar el atributo de points de un polígono y convertirlo en el atributo d una ruta al anteponer M y agregar z . ver en vivo en jsFiddle :

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="20,20 100,20 100,100 30,110"/>
  <path        d="M20,20 100,20 100,100 30,110z" fill="green" transform="translate(100,0)"/>
</svg>