I’m using an svg file produced by graphviz. My goal is to add checkboxes at the top in a foreignObject to toggle the visibility of certain elements. This is a minimal example where unchecking the checkbox should make the cluster element disappear.

In the example below, the foreignObject is rendered as the bottom layer, resulting it being hidden by the svg content. Is there a way to control this? Or at the very least, get it top level?

I try to animate the small bubbles in my svg. But when scale is applied it looks like it’s applied to the distances between the bubbles rather than the bubbles only. It makes the buble to move to the side rather then up only as I’d like them. Why? And how to fix it? The transform-origin only changes the direction all of them moves.

<style> #us-map { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } path:hover { stroke: #ffffff !important; stroke-width: 2px; stroke-linejoin: round; fill: #D3D3D3 !important; cursor: pointer; } text { dominant-baseline: central; text-anchor: middle; fill: black; font-size: 55px; position: absolute; z-index: 2000; } </style> <svg xmlns:svg=”http://www.w3.org/2000/svg” xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” version=”1.1″ id=”us-map” preserveAspectRatio=”xMinYMin meet” […]

I’m trying to use css animations on some SVG text and for some reason the scale() property isn’t working. This is how I have it set up.