How did text appear when hovering over svg?

Question

css

How to make svg text appear on hover over

svg

<symbol id="flag-ru" width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="20" height="12" viewBox="0 0 20 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="20" height="4" fill="white"/>
<rect y="4" width="20" height="4" fill="#001AFF"/>
<rect y="8" width="20" height="4" fill="#FF0000"/>
</svg>
</symbol>

html

<div class="flag flag--ru">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>

Answer 1

data:() ({
hasText: false
})

meathods: {
showText() {
this.hasText = true
}

hideText() {
this.hasText = false
}
}

<div class="flag flag--ru" @mouseover="showText" @mouseleave="hideText">
      <svg>
         <use xlink:href="@/assets/svg/svg.svg#flag-ru"></use>
       </svg>
</div>

<p v-if="hasText">any text</p>