Question

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

＆＃13;

email: { // <- value of this field is sent by remote
    required: true,
    maxlength: 100,
    email: true,
    remote: {
        url: "usernameChecker.php",
        type: "post", 
    },
},

＆＃13;

.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);
}

＆＃13;

Answer 1

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

1 个答案: