SVG容器元素不会根据子元素自动缩放

Question

I want to implement a tooltip. The idea in its most simplicity is to show a rectangular, when hovered on a circle. How can I achieve that?

What I do not want is to show the rectangular when not hovered precisely on the circle.

Please check the example: https://codepen.io/EminDurak/pen/JXOVqv

SVG:

<svg width="800px" height="300px" viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">

<g x="282.7416666666667" y="252.6" width="3" height="3" class="tooltip-container">

  <circle cx="200" cy="120" r="20" value="12" class="tooltip-circle"></circle>

  <rect x="50" y="30" width="300" height="80" rx="4" ry="4" r="5" value="12" class="tooltip-box"></rect>

  <text x="100" y="80" style="fill:black">Shouldn't appear when hovered here</text>
  <text  x="150" y="160" style="fill:black">Hover the circle</text>
</g>
</svg>

And the CSS (SCSS):

.tooltip-box {
  fill: purple;
  opacity: 0;
  stroke-width: 1px;
}

.tooltip-container {
  &:hover > * {
    opacity: 1 !important;
  }
}

Answer 1

So it turns out that the best solution to this problem is using display:none , instead of opacity:0 . At the time of writing the question I had not checked which css selectors work for SVG; didn't think display would be one. But it is.

So this code below works:

<g x="282.7416666666667" y="252.6" width="3" height="3" class="tooltip-container">

  <circle cx="200" cy="120" r="20" value="12" class="tooltip-circle"></circle>

  <rect x="50" y="30" width="300" height="80" rx="4" ry="4" r="5" value="12" class="tooltip-box"></rect>

</g>

and css:

.tooltip-box {
  fill: purple;
  opacity: 0;
  stroke-width: 1px;
}

.tooltip-container:hover > .tooltip-box {
  opacity: 1;
}

Note: The reason I placed the <Text> element was just to indicate what I was trying to do. The main point is that when an svg element is set to display:none , the container <g> element's size is computed accordingly, so as if the svg element is not rendered at all. Then one can set the element to display: block on hovered to container <g> and consequentially be able to exercise, let's say, a tooltip function.