我想創建一個包含圖像的圓圈,我已經嘗試過使用pattern
或filter
,但沒有一個給我預期的結果。下面是代碼:圓圈內的SVG圖像
<svg id="graph" width="100%" height="400px">
<!-- filter -->
<filter id = "born1" x = "0%" y = "0%" width = "100%" height = "100%">
<feImage xlink:href = "https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"/>
</filter>
<circle id = "born" class = "medium" cx = "5%" cy = "20%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" filter = "url(#born1)"/>
<!-- pattern -->
<defs>
<pattern id="image" x="0" y="0" height="100%" width="100%">
<image x="0" y="0" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image>
</pattern>
</defs>
<circle id = "sd" class = "medium" cx = "5%" cy = "40%" r = "5%" fill = "white" stroke = "lightblue" stroke-width = "0.5%" fill="url(#image)"/>
</svg>
我的目標是保護圈,讓背景圖片裏面,像CSS ATTR background-image
。
改變圖像的URL礦井,使其無法正常工作。任何想法? – 2015-04-04 05:16:32