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

然后引用它作为填写文本:

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

I've done an example, the most painful part was figuring out what patternUnits and patternContentUnits actually did, this MDC article was helpful.

The text is selectable in Opera and Chrome (and, I presume, 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̶ (bug now fixed, expect it to work in Firefox 24 or so). SVG doesn't work in IE (until 9 comes out, anyway) so either don't bother with it or see if you can get VML to do similar things. If you're going to try and build a JavaScript utility to do this a good starting point might be figuring our how to make the above work in Raphaël.