svg - 在 SVG-Mask 中重复图像

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 -blocks，但这是我目前正在开发的应用程序完成的生成过程的结果。

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

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

Answer 1

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

对文本使用图案填充(使用您想要的图像)(不需要 mask )

在矩形上使用图案填充，该矩形使用带有文本的蒙版

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