기호 SVG 패턴

내 SVG에 문제가 있습니다.기호 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/

출처

2012-08-27 Euro

. 테스트 케이스는 Opera에서 작동합니다. 여기

<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-27 18:24:28

을 관련 버그 리포트입니다 : 파이어 폭스는 그래서 당신이이처럼 예를 재구성해야 할 것 <symbol> 내 <defs>에 대한 기존의 버그가 https://bugzilla.mozilla.org/show_bug.cgi? id = 353575 (btw.보고 : 2006-09-20 16:01 ... 오). Chromium도 같은 버그가 있습니다. – Euro

기호 SVG 패턴

답변

관련 문제