如何使用 vuetifyjs 在 svg 上创建 v-tooltip答案

【问题标题】：How to create a v-tooltip on svg using vuetifyjs如何使用 vuetifyjs 在 svg 上创建 v-tooltip
【发布时间】：2018-06-25 14:18:03
【问题描述】：

这是我的 SVG 的一部分：

<g id="g05">    
    <polygon class="st2" points="224.8,256.4 309.9,390.6 224.8,517.5 144.1,386.2" filter="url(#dropshadow)"/>   
    <defs>      
        <filter id="dropshadow">            
            <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>             
            <feOffset dx="3" dy="2"/>           
            <feComponentTransfer>
                <feFuncA type="linear" slope="0.5"/>            
            </feComponentTransfer>          
            <feMerge> 
                <feMergeNode/>
                <feMergeNode in="SourceGraphic"/>           
            </feMerge>      
         </filter>  
    </defs> 
</g>

这是创建 <v-tooltip>:

<v-tooltip v-model="show" top color="cyan lighten-2">
    <v-btn icon slot="activator" fab large>
      <v-icon color="red darken-1">home</v-icon>
    </v-btn>
    <span class="display-2">Продвижение</span>
</v-tooltip>

如何在我的 svg 上创建 v-tooltip？我正在尝试将其嵌套到我的 v-tooltip 中，但它似乎不起作用。

更新： 我的 SVG 看起来像这样：

当我悬停 SVG 的一部分时，它必须向我显示一个工具提示。我在顶部分享的 SVG 文件的一部分代码。

【问题讨论】：

这可能是相关的（使用foreignObject 将 div 嵌套在 svg 中）stackoverflow.com/a/17596084/184746
不幸的是，这个话题不能帮助我......
感谢您的帮助。我会试着走这条路。
我刚刚查看了 vuetify 的文档，它应该可以包装任何元素 - 如果你想包装整个 SVG，这应该是可能的 <v-tooltip><svg> ... </svg></v-tooltip>。这不是你想要达到的目标吗？您能否更新问题以更清楚地了解工具提示的位置？
@caesay 已更新...

标签： javascript svg vuejs2 vuetify.js

【解决方案1】：

我想我有同样的问题：我必须为单个 svg 元素（路径、圆圈等）提供工具提示并以“hacky”方式解决它：

我按照官方文档中的说明解决了v-tooltip 模板，但在foreignObject 标记中

然后将 svg 元素从工具提示 mount 上的 foreignObject 中移出

【讨论】：