我想在SVG中添加居中图像。
它将用作用户头像,但不这样做
.body {
width: 100%;
height: 100%;
background: #1f1b33;
padding: 2rem;
}
svg {
width: 120px;
}
<div class="body">
<svg viewBox="0 0 121.375 125.397">
<g
id="blank"
transform="translate(-1460.94 -927.887)"
>
<path
id="wrapper"
data-name="Caminho 2257"
d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
transform="translate(1484.938 966.119)"
fill="#fff"
opacity="0.2"
/>
<rect
id="within"
data-name="Retângulo 365"
width="97"
height="97"
rx="37"
transform="translate(1475 945)"
fill="#fff"
/>
</g>
</svg>
</div
我已经尝试在SVG内创建一个图像元素并将其引用为填充,但是图像未居中
有谁能够帮助我?
使用图案填充是一种方法-如果您的图像长宽比为正方形,则效果很好。请注意,图案的宽度和高度与矩形相同。在这种情况下,为简单起见,将模式填充设置为不patternUnits
将userSpaceOnUse
其缩放到对象边界框很重要。
.body {
width: 100%;
height: 100%;
background: #1f1b33;
padding: 2rem;
}
svg {
width: 120px;
}
<div class="body">
<svg viewBox="0 0 121.375 125.397">
<defs>
<pattern id="patt" patternUnits="userSpaceOnUse" width="97" height="97">
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/flace.jpg" width="97" height="97"></image>
</pattern>
</defs>
<g
id="blank"
transform="translate(-1460.94 -927.887)"
>
<path
id="wrapper"
data-name="Caminho 2257"
d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z"
transform="translate(1484.938 966.119)"
fill="#fff"
opacity="0.2"
/>
<rect
id="within"
data-name="Retângulo 365"
width="97"
height="97"
rx="37"
transform="translate(1475 945)"
fill="url(#patt)"
/>
</g>
</svg>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句