svg背景适应元素大小

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文件内容为：

<svg
  class="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 0
    L 180 0
    L 200 20
    L 300 20
    L 320 40
    L 320 140
    L 300 160
    L 20 160
    L 0 140
    L 0 20
    Z
  "></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>