SVG 使用元素工具提示答案

【问题标题】：SVG use element tooltipSVG 使用元素工具提示
【发布时间】：2016-08-19 17:15:02
【问题描述】：

现代浏览器是否可以让< use > 元素在鼠标悬停时显示矩形工具提示？

<svg id="schematic" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <symbol id="pnp-transistor">
        <image xlink:href="transistor.png" height="32px" width="32px" />

        <rect y="0" x="0" height="6px" width="32px">
            <title>collector</title>
            <hint>collector</hint>
        </rect>

        <rect y="27" x="0" height="6px" width="32px">
            <title>emitter</title>
            <hint>emitter</hint>
        </rect>

        <rect y="0" x="0" height="32px" width="6px">
            <title>base</title>
            <hint>base</hint>
        </rect>
    </symbol>

    <use xlink:href="#pnp-transistor"></use>
</svg>

【问题讨论】：

你的意思是像创建一个名为的自定义 Angular 指令，它会触发一个事件以显示带有此 SVG 图像的工具提示？
不，SVG使用元素；见上文。
只能通过一些自定义的 javascript 将标题复制到作为子元素使用。

标签： javascript css svg tooltip

【解决方案1】：

如果没有 JavaScript，似乎没有办法做到这一点，使用 getBoundingClientRect() 来定位 SVG 在 DOM 中的位置。好东西在这里：How to add a tooltip to an svg graphic。即便如此，我也不确定该方向的支持程度和设置样式是否容易。

但是，一种可能的解决方法是在符号周围添加另一个包装器，并在将鼠标悬停在伪类上时将 CSS 绑定到其中。使用attr(data-tooltip) 不如使用由符号直接继承的内容好，但也不是糟糕的第二名。

例如：

<div class="wrapper" data-tooltip="SVG Tooltip (almost)">
  <svg class="icon"><use xlink:href="#some-id"></use></svg>  
</div>

...

.wrapper:after {
  position: absolute;
  left: 50%;
  transition: 0.5s;
  content: attr(data-tooltip);
  white-space: nowrap;
  opacity: 0;
  font-size: 1.5rem;
  transform: translate(-50%, 0);
}

.wrapper:hover:after {
  position: absolute;
  opacity: 1;
  transform: translate(-50%, 0.5em);
}

Codepen：SVG With Pure CSS Tooltip

【讨论】：