Html 圈内的 SVG 图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29442833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
SVG image inside circle
提问by Bla...
I want to create a circle which contains an image, I already tried using patternor filterbut none of them give me the expected result. Below is the code:
我想创建一个包含图像的圆圈，我已经尝试使用patternorfilter但它们都没有给我预期的结果。下面是代码：
<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.
我的目标是保留圆圈并在其中提供背景图像，例如 CSS attr background-image。
回答by Paul LeBeau
A pattern will work. You just have to give the <image>a size. Unlike HTML, SVG images default to width and height of zero.
一种模式会起作用。你只需要给出<image>一个尺寸。与 HTML 不同，SVG 图像默认宽度和高度为零。
Also, if you want the image to scale with the circle, then you should specify a viewBoxfor the pattern.
此外，如果您希望图像与圆圈一起缩放，那么您应该viewBox为图案指定 a 。
<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>回答by SRIDHARAN
You don't actually need SVG for this. You can accomplish your goal with image tag itself.
您实际上不需要为此使用 SVG。您可以使用图像标签本身来实现您的目标。
.avatar {
vertical-align: middle;
width: 20px;
height: 20px;
border-radius: 50%;
}
<img src="https://connectoricons-prod.azureedge.net/kusto/icon_1.0.1027.1210.png" alt="Avatar" class="avatar">
回答by Logz
Try this,
尝试这个，
use patternUnits="userSpaceOnUse"and to set height="100%" width="100%"of <image>
使用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>
