In Nativescript-Angular, I would like to programmatically use SVG. I don't want to display a SVG image already generated but based on the interaction with the user, the SVG has to be dynamic.
For Angular only, it's quite easy by using svg and path, just like that:
<div #container width="800px" height="800px">
<svg width="100%" height="800px">
<path d="M10 475 Q 300 475 300 250" stroke="black" fill="transparent" />
<path d="M300 250 Q 200 250 200 125" stroke="black" fill="transparent" />
<path d="M200 125 Q 270 125 270 10" stroke="black" fill="transparent" />
<circle cx="270" cy="10" r="10" fill="red" />
<circle cx="200" cy="125" r="10" fill="red" />
<circle cx="300" cy="250" r="10" fill="red" />
<circle cx="10" cy="475" r="10" fill="red" />
</svg>
</div>
However, when I use it in Nativescript app, it's not rendering. I know that NS doesn't use webview and converts as much as possible to native apps.
Does anyone know how I could do? Is there a way to use raw HTML? Or does NS have an equivalent?
Maybe in TypeScript, I could generate a SVG image based on the needs and update it when the user modifies it. But in that case, how to put buttons on the circles or make the circles clickable?
Finely, I created new SVG files with all the forms I need and then I display them using nativescript-svg and the tag SVGImage.
It's less dynamic but it's a good workaround for now and my needs.