integrate svg with css manipulations

[Matan_B]

hi, 
i'm tring to create custom visualization to show svg image and highlights areas (polygons) in the image with css.

the results should be a table of objects and when clicking on the object in the table, then higlights the object in the svg image.
the issue i'm facing with is that i am only able the display the svg image in <iframe> adn i cant access to the raw data to manipulate the css for the highlighting functionality.
fetching the svg is blocked by the sandbox (i assume it's the cause).
appretiate any help

[Anonymous]

Thanks for the reply from lbendlin , please allow me to provide another insight:

Hi, @Matan_B 

You can try inserting HTML into the SVG first and then referencing CSS within the HTML. For example, you can use the <foreignObject> element to reference HTML.

Below is a screenshot from the relevant documentation:

For detailed information, please refer to:

<foreignObject> - SVG: Scalable Vector Graphics | MDN (mozilla.org)

SVG Integration (svgwg.org)

Of course, if you have any new ideas, you are welcome to contact us.
 

Best Regards,

Leroy Lu

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

[lbendlin]

Which visual are you using?  Table , Matrix, HTML5 viewer, something else?