符号中的SVG图案

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拥有约内<symbol><defs>现有错误，所以你不得不重组你这样的例子吧：

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