面试官：你真的会用 SVG 吗? (SVG 应用实战)

站长

2022年11月21日 18:41 · 阅读数 48

写在前面

在元宇宙、数字孪生等一系列数字化转型噱头的疯狂炒作下，前端界面可以说是越来越飘逸，越来越有科技感，使用普通的开源、通用组件库已经满足不了丧心病狂 的 UI 设计师了，这个时候，SVG 就该登场了，在之前一度觉得 SVG 没啥用，很多教程写了很多画圆，画长方形啥的，看来看去并不知道对实际开发有啥帮助，直到自己真正用起来，才体会到 SVG 真香，虽然 SVG 并不难，但是如果能够将 SVG 灵活运用起来，将给我们带来极其舒适的感受！

SVG 实战例子，基于 Vue2

UI 需求

UI 设计师：“emmm，我要一个长方形，然后长方形四个角切出来，但是切出来之后三角形保留着。。。。。”

气短工程师：‘中指-中指-中指’，“好的呢，没问题，这就给您实现，可能没那么快哦，亲麻烦您给点时间哇！”

UI设计师：“行，那就下午午休后给我看看吧！”

气短工程师：“。。。。。”

实现思路

1、DIV + CSS-Border

这种实现方式应该是很多人最容易想到的实现思路

元素结构

<template>
  <div class="box">
    <div class="rect">
      <div class="corner corner1"></div>
      <div class="corner corner2"></div>
      <div class="corner corner3"></div>
      <div class="corner corner4"></div>
    </div>
  </div>
</template>

构造三角形

首先通过 CSS 中的 border 样式构造四个三角形

.corner {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 30px solid #000;
}
.corner1 {
    top: -31px;
    left: -31px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: white;
}
.corner2 {
    top: -31px;
    right: -31px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: white;
    border-right-color: transparent;
}
.corner3 {
    bottom: -31px;
    left: -31px;
    border-top-color: white;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.corner4 {
    bottom: -31px;
    right: -31px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-color: white;
    border-right-color: transparent;
}

调整三角形位置，覆盖长方形四个角

通过 transform：rotateZ() 控制三角形的位置对 DIV 进行覆盖完成长方形切角

.corner {
  position: absolute;
  width: 0px;
  height: 0px;
  border: 30px solid #000;
}
.corner1 {
  top: -31px;
  left: -31px;
  transform: rotateZ(45deg);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: white;
}
.corner2 {
  top: -31px;
  right: -31px;
  transform: rotateZ(-45deg);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: white;
  border-right-color: transparent;
}
.corner3 {
  bottom: -31px;
  left: -31px;
  transform: rotateZ(45deg);
  border-top-color: white;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.corner4 {
  bottom: -31px;
  right: -31px;
  transform: rotateZ(45deg);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: white;
  border-right-color: transparent;
}

实现方式的不足

这种写法有个很大的问题是只能写出填充的切角长方形，如果想写出没有填充色，只有边框的长方形切角，就会显得非常吃力，而且对于长方形的位置的调节，在自适应的页面内，非常容易因为位置偏移而“暴露”切角底部的长方形的角

// 完整代码
<template>
  <div class="box">
    <div class="rect">
      <div class="corner corner1"></div>
      <div class="corner corner2"></div>
      <div class="corner corner3"></div>
      <div class="corner corner4"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Yimwu-test',
}
</script>

<style lang='scss' scope>
  .box {
    width: 100vw;
    height: 100vh;
    * {
      padding: 0;
      margin: 0;
    }
    .rect {
      margin-left: 500px;
      width: 500px;
      height: 200px;
      background: cadetblue;
      position: relative;
      .corner {
        position: absolute;
        width: 0px;
        height: 0px;
        border: 30px solid #000;
      }
      .corner1 {
        top: -31px;
        left: -31px;
        transform: rotateZ(45deg);
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: white;
      }
      .corner2 {
        top: -31px;
        right: -31px;
        transform: rotateZ(-45deg);
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: white;
        border-right-color: transparent;
      }
      .corner3 {
        bottom: -31px;
        left: -31px;
        transform: rotateZ(45deg);
        border-top-color: white;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
      .corner4 {
        bottom: -31px;
        right: -31px;
        transform: rotateZ(45deg);
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: white;
        border-right-color: transparent;
      }
    }
  }
</style>

面试官：你真的会用 SVG 吗? (SVG 应用实战)

2、SVG 实现切角组件

通过 SVG 实现切角框的方式就显得优雅很多，通过使用SVG中的 <polygon> 多边形，向 points 传入四个切角对应的坐标便可以优雅地控制切角大小

定义结构

<template>
  <div class="Chamfering-container" ref="ctn">
    <svg class="svg">
      <polygon :points="polygonPoint" :style="{
        fill: background,
        strokeWidth: `${borderWidth}px`,
        stroke: borderColor,
      }" />
    </svg>
  </div>
</template>

定义组件参数

props: {
  // 角顺序：左上-右上-右下-左下
  corner: {
    type: Array,
    default: () => {
      return [30,0,30,0]
    }
  },
  // 边框宽度
  borderWidth: {
    type: Number,
    default: 1
  },
  // 边框颜色
  borderColor: {
    type: String,
    default: '#0CE5F6'
  }
  // 填充颜色
  background: {
    type: String,
    default: 'rgba(12,229,246,.5)'
  },
},

Polygon 坐标点计算

computed: {
  polygonPoint(){
    let { width,height } = this
    // SVG 坐标原因，需要加偏移才能完整显示边框
    let left = this.borderWidth / 2
    let top = this.borderWidth / 2
    let right = width - this.borderWidth / 2
    let bottom = height - this.borderWidth / 2
    // 计算每个角对应的两个点的坐标
    let LT = this.corner[0] ? `${left} ${top + this.corner[0]}, ${left + this.corner[0]} ${top}` : `${left},${top}`
    let RT = this.corner[1] ? `${right - this.corner[1]} ${top}, ${right} ${top + this.corner[1]} ` : `${right},${top}`
    let RB = this.corner[2] ? `${right} ${bottom - this.corner[2]}, ${right - this.corner[2]} ${bottom}` : `${right} ${bottom}`
    let LB = this.corner[3] ? `${left + this.corner[3]} ${bottom}, ${left} ${bottom - this.corner[3]}` : `${left} ${bottom}`
    return [
      LT,
      RT,
      RB,
      LB
    ].join(',')
  }
},

切角框组件完整代码

<template>
  <div class="Chamfering-container" ref="ctn">
    <svg class="svg">
      <polygon :points="polygonPoint" :style="{
        fill: background,
        strokeWidth: `${borderWidth}px`,
        stroke: borderColor,
      }" />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    corner: {
      type: Array,
      default: () => {
        return [30,0,30,0]
      }
    },
    borderWidth: {
      type: Number,
      default: 1
    },
    background: {
      type: String,
      default: 'rgba(12,229,246,.5)'
    },
    borderColor: {
      type: String,
      default: '#0CE5F6'
    }
  },
  data(){
    return {
      width: 0,
      height: 0
    }
  },
  computed: {
    polygonPoint(){
      let { width,height } = this
      // SVG 坐标原因，需要加偏移才能完整显示边框
      let left = this.borderWidth / 2
      let top = this.borderWidth / 2
      let right = width - this.borderWidth / 2
      let bottom = height - this.borderWidth / 2
      console.log(width,height,left,top,right,bottom)
      let LT = this.corner[0] ? `${left} ${top + this.corner[0]}, ${left + this.corner[0]} ${top}` : `${left},${top}`
      let RT = this.corner[1] ? `${right - this.corner[1]} ${top}, ${right} ${top + this.corner[1]} ` : `${right},${top}`
      let RB = this.corner[2] ? `${right} ${bottom - this.corner[2]}, ${right - this.corner[2]} ${bottom}` : `${right} ${bottom}`
      let LB = this.corner[3] ? `${left + this.corner[3]} ${bottom}, ${left} ${bottom - this.corner[3]}` : `${left} ${bottom}`
      let res = [
        LT,
        RT,
        RB,
        LB
      ].join(',')
      console.log(res)
      return [
        LT,
        RT,
        RB,
        LB
      ].join(',')
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.width = this.$refs['ctn'].offsetWidth
      this.height = this.$refs['ctn'].offsetHeight
    })
  }
}
</script>

<style lang='scss' scope>
  .Chamfering-container {
    width: 100%;
    height: 100%;
    .svg {
      width: 100%;
      height: 100%;
    }
  }
</style>