SVG: 鼠标悬停时显示/隐藏文本或文本区域

Question

SVG: 鼠标悬停时显示/隐藏文本或文本区域

javascriptjqueryhtmlsvg

4

我在页面上使用clipPath将不同的“遮罩”效果应用于图像。

每个图像都有一个长度可变的标题。当鼠标悬停在图像上时，我希望在图像顶部显示标题，并在鼠标移出时隐藏标题。由于标题长度各不相同，我需要文本适当地换行，以使文本不超出图像范围。

我尝试了使用foreignObject和textArea，但似乎无法正确实现悬停效果。

我还尝试使用纯HTML（具体来说是段落标签）和绝对定位+z-index来定位文本，但文本大小没有随着图像大小相应缩放（因为它不是SVG的一部分）。

在此项目中，我使用jQuery，因此如果需要JS解决方案，则可以使用jQuery。

这是我正在使用的HTML（如果需要，可以查看jsFiddle）:

<div class="featured-image" id="featured-image-one">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
    <defs>
      <clipPath id="ellipse">
        <ellipse fill="#ff0000" cx="50" cy="35.5" rx="49.5" ry="35" />
      </clipPath>
      <clipPath id="hexagon">
        <polygon points="25, 0  75, 0 100, 43.30127018922193 75, 86.60254037844386  25, 86.60254037844386  0, 43.30127018922193"/>
      </clipPath>
      <clipPath id="rectangle">
        <rect x="0" y="0" width="100" height="70"></rect>
      </clipPath>
    </defs>
    <g>
      <image preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/800px-Bucephala-albeola-010.jpg" id="clippy" clip-path="url(#hexagon)" />
      <foreignObject x="10" y="30" width="100" height="100" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
        <body xmlns="http://www.w3.org/1999/xhtml">
          <p style="color: #ffffff; font-size: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </body>
      </foreignObject>
    </g>
  </svg>
</div>

- ctrlaltdel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- acjay · Accepted Answer

请看这个链接：http://jsfiddle.net/LgAjd/4/ 基本上，我只是给你的foreignObject添加了一个id，并将其display样式设为none，默认情况下它是不可见的，然后使用jQuery事件绑定来处理hover条件。

JavaScript代码：

$hoverText = $('#hoverText');
$('body').on('mouseover', '#featured-image-one', function () {
    $hoverText.show();
});
$('body').on('mouseout', '#featured-image-one', function () {
    $hoverText.hide();
});