Podemos ultrapassar algumas limitações do sistema SVG
, principalmente no que diz respeito aos aspetos dinâmicos (por exemplo, a animação), usando as funções do DOM
do HTML
e objetos JSON
(ver o site oficial) para gerar dinâmicamente elementos SVG
.
Especificação JSON
{
tag: 'svg',
attributes: {
width: 256,
height: 256
},
children: [{
tag: 'rect',
attributes: {
x: 0,
y: 0,
width: 256,
height: 256,
fill: 'crimson'
}
},
{
tag: 'circle',
attributes: {
cx: 128,
cy: 128,
r: 68,
style: 'fill:darkolivegreen;'
}
}
]
}
O modelo abaixo é um elemento SVG
gerado a partir de um objeto JSON
e inserido na página. É também fácil obter o respetivo código SVG
.
Pode descarregar este modelo aqui.