如何將不同的背景圖像（.png）添加到SVG圓形，並設置描邊？

我alreay看到 Add a background image (.png) to a SVG circle shape 如何將不同的背景圖像（.png）添加到SVG圓形，並設置描邊？

但對我來說，我需要增加中風和中風的寬度在不同的圖像形狀

這是我的代碼：

<svg width="700" height="660"> 
<defs> 
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
     <image x="0" y="0" xlink:href="url.png"></image> 
    </pattern> 
    <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
     <image x="0" y="0" xlink:href="url2.png"></image> 
    </pattern> 
</defs> 
<circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)" stroke-width ="2px" stroke="red"/> 
<circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)" stroke-width ="2px" stroke="red"/> 
</svg>

，這可能無法正常工作，第二個圓圈沒有填充圖像

和這個：

<svg width="700" height="660"> 
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%"> 
     <feImage xlink:href="test_image.png"/> 
    </filter> 
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" stroke-width ="2px" stroke="red"/> 
</svg>

筆畫和筆畫寬度是無用的

我該怎麼辦？我只是想顯示不同的圖像（PS：圓形），並添加不同的輪廓

來源

2017-06-21 CloudChing

你想做什麼？第二個圓與第一個圓完全相同，所以它會隱藏第一個圓。我不確定你的意思是「第二個圈子什麼都不填」。你的意思是第二個圈子沒有填充圖像嗎？ –

是的，第二個圓圈沒有填充圖像。甚至不同的位置，只有第一模式工作 – CloudChing

圖像元素沒有高度和寬度。目前只有Chrome支持AFAIK，因爲它是SVG 2的新功能。 –

使用objectBoundingBox在patternUnits屬性值，而不是userSpaceOnUse。您還需要聲明xlink命名空間。因此，嘗試使用以下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660"> 
 
    <defs> 
 
    <pattern id="image" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1"> 
 
     <image x="0" y="0" xlink:href="https://www.gravatar.com/avatar/31497e3c546c438c4eea4b68d6f9f027?s=32&d=identicon&r=PG&f=1"></image> 
 
    </pattern> 
 
    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1"> 
 
     <image x="0" y="0" xlink:href="https://lh5.googleusercontent.com/-x_BhuHcC8Ww/AAAAAAAAAAI/AAAAAAAAABg/hiPWIjRXbhI/photo.jpg?sz=64"></image> 
 
    </pattern> 
 
    </defs> 
 
    <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)" stroke-width ="2px" stroke="red"/> 
 
    <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)" stroke-width ="2px" stroke="red"/> 
 
</svg>

如果您運行的代碼片段，然後你會看到，你的個人資料圖標顯示在第一圈，我的 - 在第二位。

來源

2017-06-22 06:25:42 Alexander

非常感謝！很有幫助！我最誠摯的敬意和上帝保佑你 – CloudChing

如何將不同的背景圖像（.png）添加到SVG圓形，並設置描邊？

回答

相關問題