I use clipPath to apply various masking effects to the images on the page.
Each image will have a variable-length header. When you hang over the image, I want to show the caption on top of the image and on the mouse, I want to hide the title. Due to the varying length of the title, I need the text to wrap appropriately so that the text does not go beyond the image.
I experimented using foreignObject and textArea , but I could not get the hover effect to work correctly.
I also tried using plain HTML (specifically, a paragraph tag) and absolute positioning + z-index to place the text, but the text size did not scale with the corresponding image size (since it was not part of the SVG).
I use jQuery in this project, so if a JS solution is required, jQuery is available.
Here is the HTML I'm working with (and jsFiddle , if necessary):
<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>
source share