Question

我目前正在生成以下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>

（Preview）

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

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

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

Answer 1

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

使用图案填充（带有您想要的图像）作为文本（不需要遮罩）
在使用带有文字的掩码的矩形上使用图案填充

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

模式定义：

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

same but without using 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>

在SVG-Mask中重复图像

1 个答案: