Question

我想发生的是，当您将鼠标悬停在图像上时，会显示矢量，但我也希望显示文本。现在，文本在那里，但是一直在那里。我只希望它在您将鼠标悬停在图片上时出现。

svg{
  background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
  background-size:cover;
  width:40vmin; height:auto;
  display:block;
}

h5 {
  height: auto;
  width: 280px;  
  padding: 10px;
  color: white;
  margin-top: -105px;
  font-size: 15px;
}

text {
  font-size:350px;
  transition:font-size .4s ease-out;
  font-weight:900;
  font-family:arial;
}

svg:hover text{
  transition:font-size .4s ease-in;
  font-size: 10px;
}

<svg viewbox="0 0 50 50" width="50" height="50">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="49">
      <rect x="0.5" y="0.5" width="49" height="49" fill="#fff"/>
      <text x="18" text-anchor="middle" y="50" dy="0">D</text>
      <text x="23" id="ltrV" text-anchor="middle" y="50" dy="0">A</text>
      <text x="28" text-anchor="middle" y="50" dy="0">R</text>
      <text x="33" text-anchor="middle" y="50" dy="0">K</text>
    </mask>
  </defs>
  <rect x="0.5" y="0.5" width="49" height="49" mask="url(#mask)" fill-opacity="1" fill="#C0C0C0"/>
  <div id="overlay">
    <h5><center>text</center></h5>
</svg>

Answer 1

这是解决您的问题的小提琴。 Solution fiddle link

我想进一步通知您，在您的布局中，您已经将HTML div标签放在SVG标签内，这不是一个好方法。即使需要，也应该使用 foreignObject 元素在SVG中添加HTML标签。请参考此链接以获取有关以下内容的更多信息：https://bl.ocks.org/Jverma/2385cb7794d18c51e3ab

我所做的是将这段代码放在SVG之外，并赋予其不透明度0：

must_print

并使用以下代码在悬停时设置不透明度1：

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

文本通过SVG淡入

1 个答案: