图像剪辑到文本答案

【问题标题】：Image clip to text图像剪辑到文本
【发布时间】：2015-12-17 02:17:43
【问题描述】：

如何将图像剪辑为文本？我更喜欢在任何浏览器中都可用的方法。我尝试了 background-clip，但它并非在所有现代浏览器中都可用。

【问题讨论】：

我接受了您的回答，并将在新问题中重新制定要求。

【解决方案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>

【讨论】：

很抱歉没有提及，但这也必须是响应式的，我不确定这段文字如何换行。
如果您希望它响应式添加一个 viewBox 但这是另一个问题。 SVG 没有换行，但您可以剪辑到一些 foreignObject html 文本。