Ensin luodaan SVG-sisältö, jossa ilmestyy sininen palkki. Kun palkki on ilmestynyt, niin palkin perään ilmestyy %-luku.
<svg width="100%" height="100" style="border: solid 1px grey; padding: 10px;">
<rect id="prospalkki1" x="0" y="20" style="fill: #00c2ee; opacity: 0.8; width: 0; height: 20px;">
<animate xlink:href="#prospalkki1" id="palkki1animaatio" attributeType="CSS" attributeName="width" from="0" to="100" begin="1s" dur="3s" fill="freeze" />
</rect>
<text id="luku1" x="110" y="36" fill="black" style="font-size: 16px; font-weight: bold; opacity: 0;">--- %
<animate xlink:href="#luku1" id="aniluku1" attributeType="CSS" attributeName="opacity" from="0" to="1" begin="palkki1animaatio.end" dur="0.5s" fill="freeze" />
</text>
</svg><script>
document.getElementById("luku1").textContent = "100 %";
</script>Ongelma on siinä, että jos javascriptilla määrittääkin prosentti-tekstin, niin silloin tekstin animaatio ei toimi. Mutta, jos tekstiä ei määritä javascriptilla, niin silloin se toimii oikein.
Mitä teen väärin, tai mikä logiikka tässä on, eikö näin vain pysty tekemään?
SVG:n animaatio ei todennäköisesti ymmärrä että että animaatio tulisi suorittaa uudestaan kun tekstiä vaihdetaan tai edes ymmärrä että teksti on muuttunut. En tiedä tukeeko svg lainkaan dynaamisia sisältömuutoksia animaatioiden osalta.
Aihe on jo aika vanha, joten et voi enää vastata siihen.