Hola a todos:
El fin de semana descubrí que se pueden añadir SVG a las ventanas emergentes y pasar números como texto a las expresiones SVG para cambiar el tamaño, el color, etc.
Ejemplo de SVG
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>svg</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>100<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>100<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>circle</SPAN> <SPAN class="attr-name token">cx</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>50<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">cy</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>50<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">r</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>40<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">stroke</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>green<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">stroke-width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>4<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">fill</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>yellow<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>svg</SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>svg</SPAN> <SPAN class="attr-name token">width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{ball_width_as_String}<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">height</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>{ball_height_as_String}<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>circle</SPAN> <SPAN class="attr-name token">cx</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>50<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">cy</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>50<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">r</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>40<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">stroke</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>green<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">stroke-width</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>4<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">fill</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>yellow<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="punctuation token">/></SPAN></SPAN>
<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>svg</SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>Aún no he encontrado documentación sobre esto.
Pero me imagino que podría ser útil para crear infografías que muestren la distribución por género, los medios de transporte para ir al trabajo, etc..
¿Alguien ha probado a usar SVG en ventanas emergentes y estaría dispuesto a compartir algún ejemplo interesante?
Gracias:
Gee
