svg 实现扇形蒙层

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    class="mask-svg"
    v-if="supportSVG"
  >
    <circle
      :r="strokeWidth/2"
      cx="50%"
      cy="50%"
      fill="transparent"
      :stroke="maskColor"
      :stroke-width="strokeWidth"
      :stroke-dasharray="strokeWidth*3.1415926"
      :stroke-dashoffset="strokeDashOffset"
    />
  </svg>

  <div v-else class="mask-div">
    <div
      class="mask-div2"
      :style="{
        transform: `translate(0%, ${percent}%)`,
        backgroundColor: maskColor
      }"
    ></div>
  </div>
</template>
<script>
export default {
  props: {
    percent: {
      type: Number,
      default: 0,
    }
  },
  computed: {
    // 扇形角度偏移量
    strokeDashOffset() {
      const angle = (100 - this.percent) * (360 / 100);
      const offset = this.maskDirection * ((this.strokeWidth * 3.1415926) / 360) * (360 - angle);
      return Math.abs(offset);
    }
  },
  data() {
    return {
      supportSVG: !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg),
      strokeWidth: 35,
      maskDirection: -1, // 蒙层走向，1=逆时针，-1=顺时针
      maskColor: 'rgba(0, 0, 0, 0.4)', // 梦层颜色
    }
  },
}
</script>
<style lang="scss" scoped>
.mask-svg {
  position: absolute;
  margin: auto;
  top: 0.3rem;
  left: 0;
  right: 0;
  // width: 0.82rem;
  // height: 0.98rem;
  border-radius: 0.08rem;
  overflow: hidden;
  // 通过旋转、调换宽高值，修改开始角度值
  width: 0.98rem;
  height: 0.82rem;
  transform: rotate3d(1, -1, 0, 180deg);
  transform-origin: center center;
}
.mask-div {
  width: 0.82rem;
  height: 0.98rem;
  border-radius: 0.08rem;
  overflow: hidden;
  .mask-div2 {
    width: 100%;
    height: 100%;
    transform-origin: center bottom;
    transform: translate(0%, 100%);
  }
}
</style>