在SVG掩码中重复图像
我目前正在生成以下SVG:在SVG掩码中重复图像,svg,Svg,我目前正在生成以下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="Ver
<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
-块,但这是我当前开发的应用程序生成过程的结果
问题是文本不是完全可见,因为图像宽度只有425px。是否有一种简单的方法(例如属性)重复用于遮罩的图像
如果
比例大于1,文本将可见,但图像将被拉伸,这不是我想要的。您可以通过多种不同的方式执行此操作:
- 对文本使用填充图案(使用所需的图像)(不需要遮罩)
- 在使用带有文本的遮罩的矩形上使用填充图案
下面是一个演示如何创建简单模式的示例
模式定义:
<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>
及
一些文本
<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>