Forum Discussion

Matan_B's avatar
Matan_B
Regular Visitor
1 year ago

integrate svg with css manipulations

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

Need Help

2 Replies

  • lbendlin's avatar
    lbendlin
    Super User
    1 year ago

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

  • Anonymous's avatar
    Anonymous
    Not applicable
    1 year ago

    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.