9

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

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

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

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

4

2 回答 2

14

使用 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这篇MDC 文章很有帮助。patternContentUnits

文本可以在 Opera 和 Chrome 中选择（我猜是 Safari ）SVG 在 IE 中不起作用（直到 9 出现）所以要么不要打扰它，要么看看你是否可以让 VML 做类似的事情。如果您打算尝试构建一个 JavaScript 实用程序来执行此操作，那么一个很好的起点可能是弄清楚我们如何在Raphaël中进行上述工作。

于 2010-09-03T13:40:32.973 回答
0

尝试这个 ;）

<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/中是一样的

于 2013-12-24T22:45:32.283 回答