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

Question

在杂志等中经常出现的一个简洁的印刷效果是选择一个非常粗体的字体并将图像放在文本中。以下是效果的随机示例：

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

我想知道是否可以使用SVG执行此操作？我从来没有使用过SVG，但如果可以的话，可能值得尝试绕过它。

例如，是否可以让javascript遍历页面并查找某些元素（h1s或某些类）并在运行中生成一个SVG文件，该文件包含所选字体中带有图像的可选文本夹到字母形状？有谁知道这是否已经完成，教程，以及其他任何可能有趣的问题...

Answer 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找出如何完成上述工作。

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