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

一个整洁的排版效果经常出现在杂志等的标题中，那就是选择一种非常粗体的字体，并在文本中放置一个图像。下面是一个随机的效果示例：

在web设计中，使用纯html/css/js是无法做到这一点的。这可以通过flash或位图图像来实现，但这些技术显然有一些很大的缺点

我想知道是否可以用SVG实现这一点？我从来没有使用过SVG，但如果这是可能的话，也许值得一试

---

例如，是否可以让javascript遍历页面，查找某些元素（H1或某些类），并动态生成一个SVG文件，其中包含选定字体的可选文本，并将图像剪裁为字母形状？是否有人知道这是否已经完成，教程，以及其他任何可能对查看此问题感兴趣的内容…

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

然后将其作为文本中的参考：

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

我已经做了，最痛苦的部分是弄清楚

patternUnits

和

patternContentUnits

实际上做了什么

在歌剧和铬（我猜想，我猜测，还有Safari）的歌剧和铬（以及，我猜测，我猜测，Safari）的歌剧和铬（以及Safari）的可选择文本是可选择的歌剧和铬（以及歌剧歌剧和铬（以及我在歌剧和铬（以及我假设，我猜测，Safari）的歌剧和铬（以及，我假设，在歌剧歌剧和铬）的文本是可选择的，b，u，u，t，t，t，n，n，n，o，o，o，o，o，o，o，o，o，o，t，t，t，t，o，t，t，t，t，t，n，n，o，o，o，o，t，t，t，t，t，o，t，t，t，t，t，t，t，t，o，t，t，t，t，t，t，t，t，c，t，t，t，t，t，t，t，t，t，t，t它可以在Firefox中工作（大约24小时）。SVG在IE中不起作用（无论如何，直到9出现），所以不要麻烦它，或者看看是否可以让VML做类似的事情。如果您打算尝试构建一个JavaScript实用程序来实现这一点，那么一个很好的起点可能是了解如何使上述功能发挥作用。

试试这个；）

嘿

在jsfiddle中也是如此

---

谢谢！这正是我想要的。我会好好看看你做了什么，然后用svg把我的脚弄湿。我很惊讶，如果这么简单的话，这个效果没有被更多地使用；这是标准css/html可能性中的一个明显限制…@最后一个孩子，我想我们会看到标准html/css中引入了几个SVG功能-毕竟是同一个渲染引擎，实现效果的代码已经存在于大多数浏览器中-就像一些画布功能（阴影、变换）一样现在是CSS.random的一部分，但一旦使用了它，它就非常整洁了

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