一個SVG-面膜

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 ，但那是我正在開發的應用程序完成的生成過程的結果。

問題是文字不完全可見，因爲圖像寬度僅爲425px。有一種簡單的方法（例如，屬性），以重複圖像，即用於掩模？

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