Как создать v-всплывающую подсказку на SVG с помощью vuetifyjs

Question

Как создать v-всплывающую подсказку на SVG с помощью vuetifyjs

1

Вот часть моего 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>

Как создать v-tooltip на моем svg? Я пытаюсь вложить его в свою v-tooltip но это, похоже, не работает.

Обновление: мой SVG выглядит так:

И когда я нахожу часть SVG, он должен показать мне всплывающую подсказку. Код части файла SVG, который я использовал в верхней части.

Камилов Тимур 16 янв. 2018, в 21:29

Источник

0

Это может быть связано (использование foreignObject для foreignObject div в svg) stackoverflow.com/a/17596084/184746
caesay 16 янв. 2018, в 19:41
0

К сожалению, эта тема не может мне помочь ...
Камилов Тимур 16 янв. 2018, в 19:42
0

спасибо тебе за помощь Я попытаюсь пойти по этому пути.
Камилов Тимур 16 янв. 2018, в 19:46
0

Я только что посмотрел на документы для vuetify, он должен работать, чтобы обернуть любой элемент - если вы хотите обернуть весь SVG, это должно быть возможно <v-tooltip><svg> ... </svg></v-tooltip> , Разве это не то, что вы пытаетесь достичь? Можете ли вы обновить вопрос, чтобы было более понятно, где должна быть подсказка?
caesay 16 янв. 2018, в 19:47
0

@caesay Обновлено ...
Камилов Тимур 16 янв. 2018, в 19:56

Показать ещё 3 комментария

Теги:

javascript

vuejs2

svg

vuetify.js

1 ответ

Ещё вопросы

Это может быть связано (использование foreignObject для foreignObject div в svg) stackoverflow.com/a/17596084/184746
К сожалению, эта тема не может мне помочь ...
спасибо тебе за помощь Я попытаюсь пойти по этому пути.
Я только что посмотрел на документы для vuetify, он должен работать, чтобы обернуть любой элемент - если вы хотите обернуть весь SVG, это должно быть возможно <v-tooltip><svg> ... </svg></v-tooltip> , Разве это не то, что вы пытаетесь достичь? Можете ли вы обновить вопрос, чтобы было более понятно, где должна быть подсказка?

LShapz · Answer 1 · 2018-01-16T18-41-00.000Z

Для каждой фигуры, для которой требуется всплывающая подсказка, вам нужно обернуть ее в v-tooltip, дать самой форме slot = "активатор", затем под формой, но внутри обертки v-tooltip включить span с текстом всплывающей подсказки.

Итак, скажем, вы хотели иметь свою подсказку на 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>

Я сделал, как вы показали, но это не работает должным образом. v-tooltip была преобразована правильно, но ничего не происходит, когда я наводю форму. Я делаю что-то неправильно?
Я также пытался обернуть многоугольник в v-tooltip , но тоже ничего не происходит ....
Я пробовал что-то подобное, и это не сработало.