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ところ、ブロックが 2 つあることがわかりましたが、これは現在開発中のアプリケーションによって生成プロセスが行われた結果です。

問題は、画像の幅がわずか 425 ピクセルであるため、テキストが完全に表示されないことです。マスクに使用される画像を繰り返す簡単な方法 (属性など) はありますか?

1scaleより大きい場合、テキストは表示されますが、画像は引き伸ばされ、それは私が望むものではありません.

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 に答える