4

我clipPath用来对页面上的图像应用不同的“蒙版”效果。

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

我已经尝试过使用foreignObjectand 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>​
4

1 回答 1

3

看看这个：http: //jsfiddle.net/LgAjd/4/

基本上我只是id在你的 foreignObject 中添加了一个并将其display设置为 be none，因此默认情况下它是不可见的，然后使用 jQuery 事件绑定来处理悬停条件。

Javascript代码：

$hoverText = $('#hoverText');
$('body').on('mouseover', '#featured-image-one', function () {
    $hoverText.show();
});
$('body').on('mouseout', '#featured-image-one', function () {
    $hoverText.hide();
});
于 2012-12-12T23:15:53.257 回答