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

发布于 2024-09-17 17:31:10 字数 385 浏览 5 评论 0原文

杂志等标题中经常看到的一种简洁的印刷效果是选择一种非常粗体的字体并将图像放在文本中。这是效果的随机示例： alt text

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

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

例如，是否可以让 JavaScript 浏览页面并查找某些元素（h1s 或某些类）并即时生成一个 SVG 文件，其中包含所选字体的可选文本以及剪切到的图像字母形状？有谁知道这是否已经完成，教程，任何其他可能对研究这个问题感兴趣的东西......

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑饮青盏花 2024-09-24 17:31:10

使用 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）中选择 ̶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̶ （错误现已修复，预计它可以在 Firefox 24 左右运行）。 SVG 不能在 IE 中工作（无论如何，直到 9 版本出来），所以要么不要理会它，要么看看是否可以让 VML 做类似的事情。如果您打算尝试构建一个 JavaScript 实用程序来执行此操作，那么一个好的起点可能是弄清楚如何在中实现上述工作拉斐尔。

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

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.

回复收藏 0 原文

云柯 2024-09-24 17:31:10

试试这个;)

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

Try this ;)

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

here is the same in jsfiddle
http://jsfiddle.net/nedudi/v84p5/1/

回复收藏 0 原文

~没有更多了~