svg - 使用SVG对带有可选文本的图像进行 mask -可以吗？

Question

经常在杂志等头条新闻上看到的一种整洁的打印效果是选择一种非常粗体的字体，然后在图像中放置图像。这是效果的随机示例:

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

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

例如，是否可以让javascript浏览页面并查找某些元素(h1或某些类)，然后动态生成SVG文件，该文件包含以所选字体显示的可选文本，并在其中剪切了图像。字母形状？有谁知道这个问题是否已经完成，教程，其他可能对解决这个问题有趣的事情...

Answer 1

可以使用SVG来做到这一点，尽管您不需要进行 mask ，但是您只需将图像指定为图案即可:

<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)中进行选择。 SVG在IE中不起作用(无论如何，直到9出来)，所以不要理会它，或者看看是否可以让VML做类似的事情。如果您要尝试构建一个JavaScript实用程序来执行此操作，那么一个很好的起点可能是弄清楚我们如何在 l̶o̶n̶g̶ ̶s̶t̶a̶n̶d̶i̶n̶g̶ ̶b̶u̶g̶中完成上述工作。