圆圈内的SVG图像
问题描述:
我想创建一个包含图像的圆圈,我已经尝试过使用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
。
答
模式才能正常工作。你只需要给<image>
一个大小。与HTML不同,SVG图像默认为宽度和高度为零。
此外,如果您想让图像与圆形一起缩放,那么您应该为图案指定一个viewBox
。
<svg id="graph" width="100%" height="400px">
<!-- pattern -->
<defs>
<pattern id="image" x="0%" y="0%" height="100%" width="100%"
viewBox="0 0 512 512">
<image x="0%" y="0%" width="512" height="512" 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="url(#image)" stroke="lightblue" stroke-width="0.5%" />
</svg>
答
试试这个,
使用patternUnits="userSpaceOnUse"
并设置height="100%" width="100%"
<image>
的
<defs>
<pattern id="image" x="0" patternUnits="userSpaceOnUse" y="0" height="100%" width="100%">
<image x="0" y="0" width="500" height="500" xlink:href="http://www.viralnovelty.net/wp-content/uploads/2014/07/121.jpg"></image>
</pattern>
</defs>
改变图像的URL矿井,使其无法正常工作。任何想法? – 2015-04-04 05:16:32