使用可选文本在SVG中遮罩图像 - 可行吗？

Question

在杂志等头条中经常看到的一个漂亮的排版效果是，选择一个非常粗体的字体，在文本内插入一张图片。以下是该效果的随机示例：

在网页设计中，使用纯html/css/js无法实现这一效果。可以使用flash或位图图像来实现，但这些技术显然存在一些缺点。

我想知道是否可能使用SVG来实现这一效果？虽然我从未使用过SVG，但如果可能的话，值得尝试理解它。

例如，是否可能让JavaScript浏览页面并查找某些元素（h1或特定类），并即时生成一个SVG文件，其中包含所选字体的可选择文本和剪切到字母形状的图像？有人知道是否已经完成了这项工作，教程或其他任何可能有趣的东西来解决这个问题吗...

- last-child

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>

然后将其作为文本中的填充引用：

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

我做了一个示例，最麻烦的部分是搞清楚patternUnits和patternContentUnits的作用，这篇MDC文章很有帮助。

在Opera和Chrome中可以选择文本（以及我推测的Safari），但在Firefox中却不能，因为它存在一个长期的Bug（该Bug现已修复，预计在Firefox 24中可以正常使用）。SVG在IE中不起作用（至少要等到IE9），因此要么不用它，要么看看是否可以使用VML实现类似的效果。如果你想尝试构建一个JavaScript工具来做这件事，一个好的起点可能是弄清楚如何让上面的内容在Raphaël中工作。

- robertc

---

谢谢！这正是我在寻找的。我会仔细研究你所做的，并开始尝试使用svg。如果这么简单，我很惊讶为什么这种效果没有被更多地使用；这是标准css/html可能性中如此明显的限制... - last-child

@last-child 我认为我们会看到几个 SVG 特性被引入标准的 HTML/CSS 中 - 毕竟它们都是相同的渲染引擎，实现效果的代码已经在大多数浏览器中存在 - 就像一些 Canvas 特性（阴影、变换）现在已成为 CSS 的一部分。 - robertc

随机SVG中的故障，但是一旦解决了这个问题，这真的很不错。 - Louis Maddox

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/

- Nedudi