Question

我的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/

Answer 1

你没有做错任何事。您的测试用例适用于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>

符号中的SVG模式

1 个答案: