svg背景适应元素大小
background-image: url("./test.svg");
background-size: 100% 100%;
如果你的css代码是以上这样的，它可能不会达到理想的效果
为了解决这个问题
方法一：修改svg文件，在svg标签中加属性preserveAspectRatio=“none”
方法二：将background-image: url(“./test.svg”);改为background-image: url(“./test.svg#svgView(preserveAspectRatio(none))”);
以vue为例
<template><div style="padding: 20px"><div class="box" :style="{width: `${width}px`, height: `${height}px`}">这是一个具有svg背景的box，并且svg背景的尺寸会随着box尺寸的改变而改变</div><!--<div style="margin-top: 20px;">width: <el-input-number v-model="width"></el-input-number></div><div style="margin-top: 20px;">height: <el-input-number v-model="height"></el-input-number></div>--></div>
</template><script>
export default {name: 'test',data() {return {width: 280,height: 120}}
}
</script><style scoped lang="scss">
.box {padding: 20px;background-image: url("./test.svg#svgView(preserveAspectRatio(none))");background-size: 100% 100%;
}
</style>
test.svg文件内容为：
<svgclass="icon"version="1.1"xmlns="http://www.w3.org/2000/svg"width="320"height="160"viewBox="-1 -1 322 162"fill="none"stroke="blue"stroke-width="1"preserveAspectRatio="none"
><path d="M 20 0L 180 0L 200 20L 300 20L 320 40L 320 140L 300 160L 20 160L 0 140L 0 20Z"></path><polyline points="0,0 14,0, 0,14, 0,0"></polyline><line x1="186" y1="0" x2="206" y2="20"></line><line x1="314" y1="140" x2="294" y2="160"></line>
</svg>
)