Vue<剪切路径悬停效果>

效果图：

img.gif

📖想看代码的，直接滚到最下面 ~~~~i

主要通过js控制cx cy来控制剪切圆的位置， r 为剪切圆的半径

<circle cx="0" cy="0" fill="#000" r="0px" />

因为此处引用了剪切路径，所以剪切圆内的内容被替换成了图片

image.png

此处是监听全局的鼠标事件，也可以配置成模块监听效果，效果如下:

img.gif

 <div class="item" @mousemove="move">

move(e) {
      let box = document.querySelector(".item");
      let dt = document.querySelector("#clip circle");
      let cx = e.pageX - box.offsetLeft;
      let cy = e.pageY - box.offsetTop;
      dt.setAttribute("cx", cx);
      dt.setAttribute("cy", cy);
      dt.setAttribute("r", "130px");
    }

.item circle {
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: 50% 50%;
  transform: scale(0)
}

想了解更多svg剪切知识的，点击这里查看更多
效果参考地址：https://www.jq22.com/jquery-info15240

代码如下：

<template>
  <div class="overall">
    <div class="item">
      <img src="@/assets/img/bck3.jpg" alt />
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 300 200">
        <defs>
          <clipPath id="clip">
            <circle cx="0" cy="0" fill="#000" r="0px" />
          </clipPath>
        </defs>
        <text class="svg-text" dy=".3em" x="100px" y="100px">Mount</text>
        <g clip-path="url(#clip)">
          <image
            height="100%"
            preserveAspectRatio="xMinYMin slice"
            width="100%"
            xlink:href="@/assets/img/bck4.jpg"
          />
          <text class="svg-masked-text" dy=".3em" x="100px" y="100px">Mount</text>
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.move();
  },
  methods: {
    move() {
      let box = document.querySelector(".item");
      let dt = document.querySelector("#clip circle");
      window.addEventListener("mousemove", function(e) {
        let cx = e.pageX - box.offsetLeft;
        let cy = e.pageY - box.offsetTop;
        dt.setAttribute("cx", cx);
        dt.setAttribute("cy", cy);
        dt.setAttribute("r", "130px");
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
  img {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
}
.item circle {
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: 50% 50%;
}
.item text {
  font-weight: bold;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 0.3rem;
}
.svg-masked-text {
  fill: white;
}
.item:hover circle,
.item:hover image {
  transform: scale(1);
}
</style>