javascript - SVG 使用元素工具提示

Question

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

按照 15.2.1 The hint element 指定.

<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>

Answer 1

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

但是，一个可能的解决方法是在符号周围添加另一个包装器，并将鼠标悬停在伪类上时将 CSS 绑定(bind)到其中。使用 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);
}

代码笔:SVG With Pure CSS Tooltip