使用 SVG 屏蔽带有可选文本的图像 - 可能吗？答案

【问题标题】：Masking an image with selectable text with SVG - possible?使用 SVG 屏蔽带有可选文本的图像 - 可能吗？
【发布时间】：2011-04-07 18:33:09
【问题描述】：

在杂志等标题中经常看到的一种简洁的排版效果是选择一种非常粗体的字体并将图像放在文本中。这是效果的随机示例：

在网页设计中，没有办法用普通的 html/css/js 做到这一点。可以使用 Flash 或位图图像来完成，但这些技术显然有一些很大的缺点。

我想知道是否可以使用 SVG 来做到这一点？我从未使用过 SVG，但如果可以的话，可能值得尝试一下。

例如，是否可以让 javascript 浏览页面并查找某些元素（h1s 或某些类）并动态生成一个 SVG 文件，该文件包含所选字体和图像的可选文本剪裁成字母形状？有谁知道这是否已经完成，教程，任何其他可能对查看这个问题感兴趣的东西......

【问题讨论】：

标签： svg masking

【解决方案1】：

用 SVG 可以做到这一点，虽然你不需要做遮罩，你可以将图像指定为图案：

<defs>
    <pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
        <image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0"
            width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
    </pattern>
</defs>

然后在您的文本中将其引用为fill：

<text fill="url(#img1)">

我已经完成了an example，最痛苦的部分是弄清楚patternUnits 和patternContentUnits 实际做了什么，this MDC article was helpful。

文本可在 Opera 和 Chrome（我猜是 Safari）中选择 ̶b̶u̶t̶̶n̶o̶t̶̶F̶i̶r̶e̶f̶o̶x̶̶b̶e̶c̶a̶u̶s̶e̶̶o̶f̶̶a̶̶l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶（错误现已修复，希望它可以在 Firefox 24 左右运行）。 SVG 在 IE 中不起作用（直到 9 出现），所以要么不要打扰它，要么看看你是否可以让 VML 做类似的事情。如果您打算尝试构建一个 JavaScript 实用程序来执行此操作，那么一个好的起点可能是弄清楚我们如何在 Raphaël 中完成上述工作。

【讨论】：

谢谢！这正是我一直在寻找的。我会仔细看看你做了什么，然后用 svg 弄湿我的脚。如果这么简单，我很惊讶这种效果并没有被更多地使用。这是标准 css/html 可能性的一个明显限制......
@last-child 我想我们会看到一些 SVG 特性被引入到标准 HTML/CSS 中——毕竟它是同一个渲染引擎，实现效果的代码已经存在于大多数浏览器中——只是就像几个 Canvas 功能（阴影、变换）现在是 CSS 的一部分。
random glitch in the svg 但是一旦解决了，这真的很整洁

【解决方案2】：

试试这个 ;)

<svg>  
  <defs>
    <clipPath id="textClip">
      <text id="text1" x="20" y="300" style="font-family: Arial; font-weight: bold;font-size: 180pt; stroke: black; fill: none;">HEY</text>
    </clipPath>
    <g id="shapes">
      <image id="resultImg"  preserveAspectRatio="xMidYMid meet" width="520px" height="520px" xlink:href="http://beerhold.it/500/500"/>
    </g>
  </defs>
  <g >
    <use xlink:href="#shapes" style="clip-path: url(#textClip);"/>
  </g>
</svg>

这里在 jsfiddle 中是一样的 http://jsfiddle.net/nedudi/v84p5/1/

【讨论】：