![圆圈内的SVG图像]( "圆圈内的SVG图像")
本文介绍了圆圈内的SVG图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个包含图片的圆圈，我已经尝试过使用 pattern 或 filter ，但没有一个他们给我预期的结果。以下是代码：
babel =false> < svg id =graphwidth = 100％height =400px> <！ - filter - > < filter id =born1x =0％y =0％width =100％height =100％> < feImage xlink：href =https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png\"/> < /滤光器> < circle id =bornclass =mediumcx =5％cy =20％r =5％fill =whitestroke =lightbluestroke-width =0.5％filter =url（＃born1）/> <！ - 模式 - > < DEFS> < pattern id =imagex =0y =0height =100％width =100％> < image x =0y =0xlink：href =https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png>< / image> ; < /图案> < / DEFS> < circle id =sdclass =mediumcx =5％cy =40％r =5％fill =whitestroke =lightbluestroke-width =0.5％fill =url（#image）/>< / svg>
b
$ b
我的目标是保留圈子并为其提供背景图片，例如CSS attr background-image 。
解决方案
一个模式可以工作。你只需要给< image> 一个大小。与HTML不同，SVG图像的默认宽度和高度为零。
另外，如果您希望图像与圆形一起缩放，则应指定
viewBox 。
< svg id =graphwidth =100％height = 400像素 > <！ - 模式 - > < DEFS> < pattern id =imagex =0％y =0％height =100％width =100％viewBox =0 0 512 512> < image x =0％y =0％width =512height =512xlink：href =https://cdn3.iconfinder.com/data/icons/people-professions/512/婴儿512.png>< /图像> < /图案> < / DEFS> < circle id =sdclass =mediumcx =5％cy =40％r =5％fill =url（#image）stroke =lightbluestroke-width = 0.5％/>< / svg>
I want to create a circle which contains an image, I already tried using pattern or filter but none of them give me the expected result. Below is the code:
<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>
My goal is to preserve the circle and give background image inside it, something like CSS attr background-image.
解决方案
A pattern will work. You just have to give the <image> a size. Unlike HTML, SVG images default to width and height of zero.
Also, if you want the image to scale with the circle, then you should specify a viewBox for the pattern.
<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>
这篇关于圆圈内的SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！