4

我目前正在生成以下 SVG：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
    <defs>
        <text id="txt1" y="100" font-weight="bold" font-family="Verdana" font-size="100" fill="white">Some Text</text>
        <image id="img1" x="0" y="0" width="425" height="319" opacity="1" xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
    </defs>     
    <g id="group1" transform="translate(0 0) rotate(0)" opacity="1">
        <defs>
            <mask id="mask1" x="0%" y="0%" width="100%" height="100%" maskUnits="objectBoundingBox">
                <use x="0" y="0" width="1000" height="400" transform="rotate(0)" opacity="1" xlink:href="#txt1" />
            </mask>
        </defs>
        <g mask="url(#mask1)" opacity="1">
            <use x="0" y="0" width="1000" height="400" transform="rotate(0) scale(1)" opacity="1" xlink:href="#img1" />
        </g>
    </g>
</svg>

（预览）

我已经缩短了 SVG 并且我知道有两个defs块，但这是我目前正在开发的应用程序完成的生成过程的结果。

问题是文本不是完全可见的，因为图像宽度只有 425 像素。是否有一种简单的方法（例如属性）来重复用于遮罩的图像？

如果scale大于 1，文本将可见，但图像会被拉伸，这不是我想要的。

4

1 回答 1

6

您可以通过多种不同的方式执行此操作：

  • 对文本使用图案填充（使用您想要的图像）（不需要遮罩）
  • 在使用带有文本的蒙版的矩形上使用图案填充

这是一个小提琴，展示了如何做一个简单的模式。

模式定义：

<pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10" 
 width="425" height="319">
    <image width="425" height="319" 
     xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
</pattern>

上述模式的用法：

<g mask="url(#mask1)" opacity="1">
    <rect width="1000" height="400" fill="url(#pat1)" />
</g>

同样但不使用 mask：

<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 viewBox="0 0 1000 360">
    <defs>
        <pattern patternUnits="userSpaceOnUse" id="pat1" x="10" y="10" 
         width="425" height="319">
            <image width="425" height="319" 
             xlink:href="http://designm.ag/images/0709/wood/71.jpg" />
        </pattern>
        <text id="txt1" y="100" font-weight="bold" font-family="Verdana" 
         font-size="100">Some Text</text>
    </defs>     

    <use width="1000" height="400" xlink:href="#txt1" fill="url(#pat1)"/>
</svg>
于 2012-11-09T12:53:24.390 回答