图像剪辑到文本

Question

如何将图片剪辑成文字？我更喜欢一种在任何浏览器中都可用的方法。我试过 background-clip 但它在所有现代浏览器中都不可用。

Answer 1

为图像添加剪辑路径，您将看到剪辑后的图像。

我通过在裁剪后的图像后面添加一个低不透明度的图像副本，使其看起来更像您的示例。

<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>

图像剪辑到文本

Image clip to text

css

svg

raphael

snap.svg