爲什麼這段代碼沒有在svg rectangale上顯示背景圖片

我的下面的代碼不能按預期工作。不在矩形的背景中顯示圖像。爲什麼這段代碼沒有在svg rectangale上顯示背景圖片

<html> 
    <body> 
    <svg width="600" height="700"> 
     <rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" style="fill:url(#godhelpme);"> 
     <title stroke="blue">My test</title> 
     </rect> 
     <defs id="godhelpme"> 
     <pattern width="200" height="200" x="0" y="0" patternUnits="userSpaceOnUse"> 
      <image width="200" height="200" class="eq__NEcontainer__currentAlarmAction" xlink:href="CurrentList.png"></image> 
     </pattern> 
     </defs> 
    </svg> 
    </body> 
</html>

該矩形總是黑色，如圖像。有任何想法嗎？ enter image description here 。我曾嘗試使用chrome進行調試。在調試器中點擊圖片標籤顯示爲空。我附上了圖片以供參考。 image tag in chrome debugger Blank image container without image 。任何幫助將不勝感激。

來源

2014-03-19 sakthisundar

呃，你的CSS標籤似乎無關緊要無碼。 –

從圖像中刪除班級，看看什麼是hapening？ –

您不能引用< defs>元素作爲填充，您需要<模式>。因此，請將id放在< pattern>元素上。另外一般來說，你應該把你的< defs>元素放在他們使用的地方之前，這樣更有效率。

像這樣：

<html> 
    <body> 
    <svg width="600" height="700"> 
     <defs> 
     <pattern id="godhelpme" width="200" height="200" x="0" y="0" 
       patternUnits="userSpaceOnUse"> 
      <image width="200" height="200" 
       class="eq__NEcontainer__currentAlarmAction" 
       xlink:href="CurrentList.png"></image> 
     </pattern> 
     </defs> 
     <rect width="300" height="400" class="eq__NEcontainer__currentAlarmAction" 
      style="fill:url(#godhelpme);"> 
     <title stroke="blue">My test</title> 
     </rect> 
    </svg> 
    </body> 
</html>

來源

2014-03-19 09:05:13

爲什麼這段代碼沒有在svg rectangale上顯示背景圖片

回答

相關問題