動畫SVG圓圈背景圖片

我需要添加一個背景圖片到我的SVG圓圈。但是，到目前爲止，我沒有嘗試過任何方法。動畫SVG圓圈背景圖片

這是我到目前爲止已經試過......

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">      
    <defs> 
     <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px"> 
      <image x="0" y="0"height="40px" width="40px" xlink:href="url.png"></image> 
     </pattern> 
    </defs> 
    <g transform="translate(40,40)"> 
     <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle> 
     <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle> 
    </g> 
</svg> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">  
    <g transform="translate(40,40)">    
     <defs> 
      <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="40px" width="40px"> 
       <image x="0" y="0" height="40px" width="40px" xlink:href="url.png"></image> 
      </pattern> 
     </defs> 
     <circle cx="0" cy="0" r="20" class="circle base" fill="url(#image)"></circle> 
     <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#image)"></circle> 
    </g> 
</svg> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">   
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%"> 
     <feImage xlink:href="url.png"/> 
    </filter> 
    <g transform="translate(40,40)"> 
     <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle> 
     <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle> 
    </g> 
</svg> 

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="60px" height="60px">  
    <g transform="translate(40,40)">   
     <filter id="this_image" x="0%" y="0%" width="100%" height="100%"> 
      <feImage xlink:href="url.png"/> 
     </filter> 
     <circle cx="0" cy="0" r="20" class="circle base" fill="url(#this_image)"></circle> 
     <circle cx="0" cy="0" r="20" class="circle progress" fill="url(#this_image)"></circle> 
    </g> 
</svg>

這裏有一個jsfiddle樣機。

希望有任何建議。很明顯，我不確定濾鏡/ defs-pattern是否應該進入SVG或變換中。

來源

2017-07-05 s15199d

過濾器是不可渲染的元素（本身我的意思是），所以從技術上講，放置它們並不重要。按照慣例，它們應該放在''部分。沒關係，你沒有兩個具有相同'id'的過濾器 - 你在你的例子中有這個。 –

順便說一句，如果你將你的代碼塊變成可用的[MCVE] –

謝謝@PaulLeBeau我在我的實際代碼中沒有重複的ID。這4個SVG配置中的每一個都是獨立嘗試的。 – s15199d

由於一個簡單的原因，圖案填充不起作用。這個：

circle { ... fill:none; ... }

來源

2017-07-07 16:59:12

Thanks @PaulLeBeau！現在顯示圖像重複並且不居中。任何建議爲背景圖像居中？ – s15199d

如果您在圖像上設置了'preserveAspectRatio =「xMidYMid slice」'，它應該在您提供的框中居中。如果你不能解決問題，請提出一個新問題。 –

動畫SVG圓圈背景圖片

回答

相關問題