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 中工作。<defs>Firefox 有一个关于内部的现有错误，<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 回答