Question

这是我的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文件的一部分代码。

Answer 1

我认为我也遇到了同样的问题：我必须为单个svg元素（路径，圆等）提供工具提示，并以一种“ hacky”的方式解决该问题：

我按照官方文档中的说明安装了v-tooltip模板，但使用了foreignObject标签

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

Answer 2

对于需要工具提示的每个形状，您需要将其包装在v-tooltip中，赋予形状本身slot =“activator”，然后在形状下方，但在v-tooltip包装器中，包含带有工具提示的范围文本。

所以，假设您想在feFuncA上提供工具提示：

<v-tooltip v-model="show" top color="cyan lighten-2">
    <feFuncA type="linear" slope="0.5" slot="activator" /> 
    <span class="display-2">Продвижение</span>
</v-tooltip>

如何使用vuetifyjs

2 个答案: