Ahoj všichni,
O víkendu jsem narazil na možnost přidávat do vyskakovacích oken SVG a předávat do výrazů SVG čísla jako text, takže lze měnit velikost, barvu atd.
Příklad 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>Zatím jsem k tomu nenašel žádnou dokumentaci.
Ale dokážu si představit, že by se to hodilo při tvorbě infografik, které znázorňují rozdělení podle pohlaví, způsoby dopravy do práce apod..
Zkoušel už někdo používat SVG ve vyskakovacích oknech a chtěl by se podělit o nějaké pěkné příklady?
Díky,
Gee
