使用SVG对带有可选文本的图像进行遮罩-可能吗? [英] Masking an image with selectable text with SVG - possible?

问题描述

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

One neat typographic effect often seen headlines in magazines etc, is to select a really bold font and put an image inside of the text. Here's a random example of the effect:

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

In web design, there is no way to do this with plain html/css/js. It could be done with flash or with a bitmap image but those techniques obviously have some big drawbacks.

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

I wonder if it is possible to do this with SVG though? I have never ever used SVG, but if this is possible, it might be worth trying to wrap my head around it.

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

For instance, would it be possible to let a javascript go through the page and look for certain elements (h1s or certain classes) and generate, on the fly, an SVG file that contains selectable text in the chosen font with an image clipped to the letter shapes? Does anyone know if this has been done, tutorials, anything else that might be interesting for looking at this problem...

推荐答案

使用SVG可以做到这一点，尽管您不需要进行遮罩，您只需将图像指定为图案即可.

It is possible to do this with SVG, though you don't need to do masking, you can just specify the image as a pattern:

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

然后在您的文本中引用作为填充:

Then reference that as the fill in your text:

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

我已经完成了一个例子，这是最痛苦的部分在弄清楚patternUnits和patternContentUnits的实际作用时，这篇MDC文章是有用.

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

可以在Opera和Chrome(我想也是Safari)中选择文本. ="nofollow noreferrer">l̶o̶n̶g̶s̶t̶a̶n̶d̶i̶n̶g̶b̶u̶g̶(现已修复错误，预计它可以在Firefox 24左右运行). SVG在IE中不起作用(无论如何，直到9出来)，所以不要理会它，或者看看是否可以让VML做类似的事情.如果您要尝试构建一个JavaScript实用程序来执行此操作，那么一个很好的起点可能是弄清楚我们如何在拉斐尔.

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.

这篇关于使用SVG对带有可选文本的图像进行遮罩-可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！