我在页面上使用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>
body
,但如果该元素是动态的,你需要将它连接到在加载时存在的某些东西上,否则你就得在它加载后钩住那个元素。从技术上讲,你应该把它挂接到元素的最深的祖先,以使选择器搜索尽可能有效。我只是选择了“body”作为浅层公共分母。 - acjay