记录通过css3裁剪图片

裁剪图片，我们一般是通过ps来达到，但是，目前的科技发展如此之快，我们不得不进步，通过css就能裁剪图片了，主要用到“clip-path”具体操作如下：

首先连接下clip-path 这是MDN中的详细介绍，今天我们要讲的是同过url来外链svg通道达到随意变换形状，可以在线生成svg 查看源文件来保存到本地，或是想要的地方，再到想要裁剪的地方通过clip-path:url(xx.svg#id)这种方式来达到裁剪，我这项目在vue中外联svg文件没有效果，只有放在当前文件中直接是clip-path:url(#id)才有效果，应该是打包时出问题了，以下代码

.heart {
  display: flex;
  justify-content: center;
  width: 120px;
  height: 103px;
  margin: auto;
  clip-path: url("#svgPath");
  background-image: url("./../../../public/static/we.jpg");
  background-size: 88%;
  background-position: 80%;
  transform: scale(0.95);
}
.jump {
  animation: jump alternate 3s infinite;
}
@keyframes jump {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

svg:
以下是一个❤形状的pth

html代码块：

<div class='h_l h_b'></div>

<div class="heart":class='jump'>

</div>

效果：