How can I clip an image to text? I would prefer a method that is available in any browser. I tried background-clip but it not available in all modern browsers.
Asked
Active
Viewed 138 times
-3
-
I accepted your answer and will reformulate the requirements in a new question. – Dan Ovidiu Boncut Sep 20 '15 at 12:06
1 Answers
3
Add a clip-path to an image and you'll see a clipped image.
I've made it look more like your example by adding an additional copy of the image with low opacity behind the clipped image.
<svg width="100%" height="100%">
<defs>
<clipPath id="sample" clipPathUnits="userSpaceOnUse">
<text x="85" y="330" font-family="sans-serif" font-size="380" font-weight="bold">I CAM</text>
</clipPath>
</defs>
<image transform="scale(0.4)" xlink:href="http://netghost.narod.ru/gff/sample/images/png/marble24.png" x="20" y="20" width="1419" height="1001" opacity="0.3" />
<image transform="scale(0.4)" xlink:href="http://netghost.narod.ru/gff/sample/images/png/marble24.png" x="20" y="20" width="1419" height="1001" clip-path="url(#sample)" />
</svg>
Robert Longson
- 118,664
- 26
- 252
- 242
-
Sorry for not mentioning it, but this also has to be responsive, and I am not sure how this text would break to a new line. – Dan Ovidiu Boncut Sep 20 '15 at 11:23
-
If you want it responsive add a viewBox but that's another question. SVG has no line breaking but you could clip to some foreignObject html text. – Robert Longson Sep 20 '15 at 11:36