如何填充屬性中使用的網址

這裏是我的代碼：如何填充屬性中使用的網址

<?xml version="1.0" standalone="no"?> 
<html> 
    <head> 
     <style> 
      .someClass { 
       fill:"url(#Pattern)"; 
      } 
     </style> 
    </head> 
    <body> 
     <div> 
      <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
       <defs> 
        <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> 
         <rect x="0" y="0" width="50" height="50" fill="skyblue"/> 
         <circle cx="25" cy="25" r="20" fill-opacity="0.5"/> 
        </pattern> 
       </defs> 
       <rect id="rect" fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/> 
      </svg> 
     </div> 
    </body> 
</html>

在矩形我已經直接添加填充屬性。它的工作，但如果我設置類（.someClass），而不是填充屬性代碼無法正常工作。

如何解決這個問題？

我需要設置類而不是填寫rect。

來源

2015-04-21 Akbar Basha

檢查它是否正常工作。在CSS中沒有必要使用""（雙引號）。

.someClass { 
 
    fill:skyblue; 
 
} 
 

 
.otherClass { 
 
    fill:url(#Pattern); 
 
}

<div> 
 
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
     <defs> 
 
      <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> 
 
       <rect x="0" y="0" width="50" height="50" class="someClass"/> 
 
       <circle cx="25" cy="25" r="20" fill-opacity="0.5"/> 
 
      </pattern> 
 
     </defs> 
 
     <rect id="rect" class="otherClass" stroke="black" x="0" y="0" width="200" height="200"/> 
 
    </svg> 
 
</div>

Fiddle link

來源

2015-04-21 09:31:43 ketan

打我吧:-) –

是它的工作，現在我找到了你使錯了.. .someClass { 填充：「URL（#Pattern ）「; } 需要刪除雙引號。 –

如何填充屬性中使用的網址

回答

相關問題