Html 使用SVG进行文本淡入

我想发生的是当你翻滚图像时，向量会显示出来，但我也希望文本也会显示出来。现在，文本在那里，但它始终在那里。我只希望它在您将鼠标悬停在图像上时出现

svg{
背景：url（'https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
背景尺寸：封面；
宽度：40vmin；高度：自动；
显示：块；
}
h5{
高度：自动；
宽度：280px；
填充：10px；
颜色：白色；
边缘顶部：-105px；
字体大小：15px；
}
正文{
字体大小：350px；
过渡：字体大小。4s放松；
字号：900；
字体系列：arial；
}
svg：悬停文本{
过渡：字体大小。4s易用；
字体大小：10px；
}

D
A.
R
K
文本

这是解决您问题的方法。

此外，我想告诉您，在您的布局中，您将HTML div标记放在SVG标记中，这不是一个好方法。即使在必须具备的情况下，也应该使用foreignObject元素在SVG中添加HTML标记。请参阅此链接以了解有关以下内容的更多信息：

我所做的是将这段代码放在SVG之外，并将其设置为0:

<div id="overlay">
  <h5><center>text</center></h5>
</div>

---

您指的是“文本”标签还是h5标签内的“文本”？如果你能澄清，我当然可以帮忙。h5标签内的文字感谢确认。请在下面找到您问题的解决方案。非常感谢您的帮助，也感谢您的洞察力！！我非常感激。

svg:hover ~ #overlay {
  transition: opacity .7s ease-in;
  opacity: 1;
}