html - 如何在不切断的情况下转换 SVG 中的对象？

Question

我正在尝试对 SVG 中的图像而不是 div 中的 IMG 应用转换。如何在不切断的情况下转换 SVG 中的对象？ 检查示例并将鼠标悬停在图像上方，我需要 SVG 的效果与右侧 div 相同

.container {
  display: flex;
  width: 200px;
  justify-content: space-around;
}
.asSvg image{
  transition: transform 0.5s;
  cursor: pointer;
}
.asSvg image:hover {
  transform: translateX(-10px);
}
.chip {
  transform: rotate(-34deg);
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.chip img {
  transform: rotate(34deg) translate3d(7px, 0 ,0);
  transition: transform 0.5s;
}
.chip img:hover {
  transform: rotate(34deg) translate3d(0, 0 ,0);
}

<div class="container">
<svg class="asSvg" width="60" height="60" viewBox="0 0 60 60">
  <defs>
    <clipPath id='clipping'>
      <path d='M0,0 L0,0 L35,0 L60,26 L60,60 L0,60'/>
    </clipPath>
  </defs>
  <g clip-path='url(#clipping)'>
    <image xlink:href='https://s11.postimg.org/vzvfu6osz/chip_25.png'  width="60" height="60"/>
  </g>
</svg>
  
<div class="chip">
  <img src="https://s11.postimg.org/vzvfu6osz/chip_25.png">
</div>
</div>

Answer 1

解决方案是给 svg 宽度和路径元素更多的空间。因此，当您悬停图像时，路径不会阻挡或切断图像。检查更新的演示以查看我的更改。

.container {
  display: flex;
  width: 200px;
  justify-content: space-around;
}
.asSvg image{
  transition: transform 0.5s;
  cursor: pointer;
}
.asSvg image:hover {
  transform: translateX(-10px);
}
.chip {
  transform: rotate(-34deg);
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.chip img {
  transform: rotate(34deg) translate3d(7px, 0 ,0);
  transition: transform 0.5s;
}
.chip img:hover {
  transform: rotate(34deg) translate3d(0, 0 ,0);
}

<div class="container">
<!-- edit svg width to 90 -->
<svg class="asSvg" width="90" height="60" viewBox="0 0 60 60">
  <defs>
    <clipPath id='clipping'>
      <!-- edit the path width to -30, this will give additional 30px to the path element -->
      <path d='M-30,0 L0,0 L35,0 L60,26 L60,60 L0,60'/>
    </clipPath>
  </defs>
  <g clip-path='url(#clipping)'>
    <image xlink:href='https://s11.postimg.org/vzvfu6osz/chip_25.png'  width="60" height="60"/>
  </g>
</svg>
  
<div class="chip">
  <img src="https://s11.postimg.org/vzvfu6osz/chip_25.png">
</div>
</div>