Tekeningen genereren met SVG

In de applicatie bij het item Tekenen met de Superformule wordt een figuur getekend. Daarvoor wordt SVG ingezet.
Op deze pagina wordt in het kort uitgelegd hoe je zoiets doet. Het is namelijk heel eenvoudig.

Voor de figuur wordt inline SVG gebruikt. Dat betekent dat er een svg-tag in het HTML-bestand staat. Er is dus geen extern bestand. De SVG-code wordt door de browser verwerkt tot een figuur.

De SVG-code wordt met JavaScript gemaakt en in een string gezet. Zie ook het item HTML genereren met JavaScript.

In de HTML maak je een div-tag. Deze moet een id heben. De tag bevat geen content. Met behulp van CSS worden de hoogte en de breedte van de div-tag ingesteld.
Als de pagina is geladen wordt de div-tag benaderd met getElementById() en wordt innerHTML vervangen door de string.
Voor de goede orde: Je moet dit regelen via getElementById().innerHTML, omdat de pagina al is geladen. document.write() kan hier niet. Zie ook het item Over document.write().

Deze werkwijze zorgt ervoor dat de tekening in één klap op het scherm verschijnt. Als je wilt dat het opbouwen van de tekening zichtbaar én te volgen is (dus als een animatie), moet je een soort vertragingstactiek toepassen. Daarvoor bestaan JavaScript bibliotheken, bijvoorbeeld vivus.js.