在矩形或圓形SVG圖像顯示爲黑色

我一直在搜索遍佈stackoverflow和谷歌找到爲什麼我的代碼不工作的原因。我正在嘗試將圖片作爲圓圈填充，但它只是顯示爲黑色。這是我的。在矩形或圓形SVG圖像顯示爲黑色

<svg width="100%" height="99%"> 
    <defs> 
     <pattern id="tile-ww" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24">  
      <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> 
     </pattern> 
     <pattern id="tile-us" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24"> 
      <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0"> 
     </pattern> 
    </defs> 

    <g id="stage" transform="translate(80,10)"> 
     <g class="node" transform="translate(380,44.375)"> 
      <rect class="name" ry="3" rx="3" height="15" x="-32" width="32"></rect> 
      <circle r="54.5" id="circle-4" fill="url(#tile-ww)"></circle> 
      <text id="text-4" x="-10" dy=".35em" text-anchor="end" z="1">Jon</text> 
     </g> 
    </g> 
</svg>

我也曾嘗試用CSS，但無濟於事

.node circle { 
    cursor: pointer; 
    stroke: #282828; 
    stroke-width: 1.5px; 
    fill: url(#tile-ww); 
}

我有雙重和三重檢查該圖像是正確的應用模式。我嘗試過相對和絕對的路徑，但沒有運氣。

來源

2012-10-05 brenjt

使用<image />而不是<img />在您的pattern defs中。爲我工作！

<img>是一個HTML5規範元素，而<image>是SVG規範的一部分。更多的信息在這裏：http://www.w3.org/TR/SVG/struct.html#ImageElement

來源

2012-10-05 18:12:07

什麼......我動態地添加模式定義的JavaScript與svg和字符串它是''，但在DOM它變成''好趕上 – brenjt

在矩形或圓形SVG圖像顯示爲黑色

回答

相關問題