¿Existe un "modelo de polígonos" para svg y canvas?

[cristian_cena]

Los elementos html son tratados como rectángulos porque css nos provee de un modelo de cajas.
Los elementos svg, ¿como son tratados? (polígonos con vertices rectos o curvos) ¿cual sería el equivalente al modelo de cajas?
Supongo que svg y canvas ocuparán el mismo "modelo de polígonos" (disculpen la ignorancia).

Muchas gracias.

PD: no sabía donde colocar este tema, si en html, en javascript, o en css.

[caricatos]

Hola:

La verdad es que me he perdido en eso de vértices rectos o curvos, ya que son trazas entre puntos... y cerrados (me refiero a svg y el tag polygon).

Antes de continuar te comento que no tengo experiencia en canvas, así que mi respuesta se limita al formato svg.

Las coordenadas (points) equivalen a las coordenadas de las áreas de los mapas de imágenes, así que generar un svg a partir de los mapas existentes es trivial, y por eso en mi experiencia personal me ha sido muy sencillo convertir mi mapa de España a su formato svg.

Me suena que con canvas es una respuesta muy parecida.

Por cierto, tal vez la parte canvas sea más oportuno para javascript, pero la parte svg en mi opinión está bien colocada aquí, o sea que al ser una pregunta compuesta, en este foro está bien.

Saludos

[cristian_cena]

Gracias caricatos, me refería a que desconozco si existe algo parecido (equivalente) a la css box model pero para svg / canvas.

Es decir, en css: margin, border, padding, width y height son propiedades que corresponden con el modelo de caja y se me ocurrió que svg y canvas podrían tener propiedades vinculadas a un "modelo de polígono" o algo así.

Gracias.

[txemaarbulo]

Iniciado por cristian_cena

Gracias caricatos, me refería a que desconozco si existe algo parecido (equivalente) a la css box model pero para svg / canvas.

Es decir, en css: margin, border, padding, width y height son propiedades que corresponden con el modelo de caja y se me ocurrió que svg y canvas podrían tener propiedades vinculadas a un "modelo de polígono" o algo así.

Gracias.

Con el permiso de caricatos, que seguro tiene mucha más base sobre el tema, te muestro algunas opciones que nos permite canvas:

Código Atributos:

attr
Cevent.attr(string attr, string value)
Cevent.attr(obj attr-value)
Modifica el valor de un atributo o grupo de atributos.
 
Atributos
fill: string color rgb, rgba, #hex, name (default "#000")
stroke: string color rgb, rgba, #hex, name (default "")
lineWidth: int ancho de linea (default 1)
rotation: int angulo en grados sexagecimal (default 0)
lineJoin: string (default "miter")
lineCap: string (default "butt")
composite: string (default "sorce-over")
shadowColor: string dafault "#000"
shadowOffsetX: int default 0
shadowOffsetY: int default 0
shadowBlur: int default 0
tx: int traslado en x (dafault 0)
ty: int traslado en y (default 0)
scaleX: int escalado en x (dafault 1)
scaleY: int escalado en y (default 1)
skewX: int default 0
skewY: int default 0
 
los siguientes atributos tienen su propio método
scale
skewX
skewY
rotate
translate
 

En canvas-event-js presentan amplia documentación y diversos tipos de trabajos

AQUI puedes encontrar algunas muestras con polígonos regulares y los códigos correspondientes.

[cristian_cena]

Antes que nada muchas gracias por responder.

Creo que no me he explicado bien (o no los he entendido):

Quisiera saber en base a que "modelo" se renderiza el svg. Si lo planteo en terminos de "analogia con css (en concreto: con el modelo de cajas)" es porque podemos dar estilos css a cualquier tag svg, pero es evidente que estos tags no usan el modelo de cajas de css. En consecuencia: si svg no usa el modelo de cajas para renderizarse, entonces: ¿que es lo que usa?.

Gracias