XiaO

SVG 背景色

XiaO / 2021-07-23


SVG (Scalable Vector Graphics) 是一种可缩放矢量图(不同于位图),其背景色可通过编辑其描述语言直接设置。

一个 SVG 图的所有描述语言都嵌在一对 <svg>...</svg> 标签之间,如下是一个黑底白边的圆。

<svg width="100%">
<circle cx="50%" cy="50%" r="40" stroke="#F5F5F5" stroke-width="1" fill="#000000" />
</svg>

修改 svg 图片的背景色,只需要在 <svg> 内修改相应的 style 属性即可。

<svg width="100%" style="background-color:rgb(245, 245, 245, 60%); border-radius: 15px;">  # 添加背景色,并设置角落弧度
<circle cx="50%" cy="50%" r="40" stroke="#F5F5F5" stroke-width="2" fill="#CC342C" />
</svg>