0

私のsvgに問題があります。多角形 (ここでは六角形) とその背景画像 (パターンとして) をグループ化するシンボルを作成したい:

    <symbol id="tile" viewBox="0 0 240 208">
        <defs>
            <pattern id="img1" patternUnits="userSpaceOnUse" width="240" height="208">
                <image xlink:href="ground.png" x="0" y="0" width="240" height="208" />
            </pattern>
        </defs>
        <polygon class="tile" fill="url(#img1)" 
                points="60 0, 180 0, 240 104, 180 208, 60 208, 0 104" />
    </symbol>

<use>タグを介してシンボルを含めます。問題は、背景画像ground.pngが表示されないことです (代わりに六角形が黒く塗りつぶされます)。

私は何を間違っていますか？

編集: http://jsfiddle.net/wuR3G/3/

4

1 に答える 1

0

あなたは何も悪いことをしていません。テストケースは Opera で動作します。Firefox には既存のバグが<defs>ある<symbol>ため、次のように例を再構築する必要があります。

<svg width="600" height="624" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 624">
    <script type="text/ecmascript" xlink:href="svg.js" />
    <title>Base</title>
    <desc>Hexagon base maptile</desc>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="240" height="208">
            <image xlink:href="https://www.google.de/images/srpr/logo3w.png" x="0" y="0" width="240" height="208" />
        </pattern>
        <symbol id="tile" viewBox="0 0 240 208">
            <polygon class="tile" fill="url(#img1)"
                    points="60 0, 180 0, 240 104, 180 208, 60 208, 0 104" />
        </symbol>
    </defs>
    <use xlink:href="#tile" x="0" y="0" width="240" height="208" />
</svg>
于 2012-08-27T18:24:28.967 に答える