Question

我想实现一个工具提示。最简单的想法是在圆圈上徘徊时显示一个矩形。我怎样才能做到这一点？

我不想要的是在圆圈上没有精确地悬停时显示矩形。

请查看示例：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>

CSS（SCSS）：

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

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

Answer 1

事实证明，此问题的最佳解决方案是使用docker-compose up，而不是mysql: image: mysql:latest volumes_from: - data environment: MYSQL_ROOT_PASSWORD: yxxxxr MYSQL_DATABASE: career_xxx MYSQL_USER: career_xxx MYSQL_PASSWORD: Ixxx8; data: image: mysql:latest #image: mysql:5.6 #image: mysql:latest volumes: - ./.config/etc/mysql/dump:/docker-entrypoint-initdb.d command: "true"。在撰写问题时，我没有检查哪些css选择器适用于SVG;不认为展示会是一个。但确实如此。

所以下面的代码有效：

display:none

和css：

opacity:0

注意：我放置<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>元素的原因只是为了表明我想要做的事情。重点是当svg元素设置为.tooltip-box { fill: purple; opacity: 0; stroke-width: 1px; } .tooltip-container:hover > .tooltip-box { opacity: 1; }时，容器<Text>元素的大小会相应地计算，就好像svg元素根本不会被渲染一样。然后，可以将元素设置为display:none悬停到容器<g>，从而可以运用工具提示功能。

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

1 个答案: