Hallo allemaal,
Dit weekend ontdekte ik dat je SVG's aan pop-ups kunt toevoegen en getallen als tekst aan SVG-expressies kunt doorgeven om de grootte, kleur enzovoort te wijzigen.
Voorbeeld van een 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>Ik heb hierover nog geen documentatie gezien.
Maar ik kan me voorstellen dat dit handig is om infographics te maken die de verdeling naar gender, vervoerswijzen voor woon-werkverkeer enzovoort weergeven.
Heeft iemand al eens met SVG's in pop-ups geëxperimenteerd en wil diegene wat mooie voorbeelden delen?
Bedankt,
Gee
