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

Question

I'm trying to apply transformation for image in the SVG instead IMG in the div. How to transform an object in SVG without cutting off? Check the example and hover above images, I need effect for SVG the same as right 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

The solution is to give more space to the svg width and the path element. So when you hover the image, the path won't block or cut off the image. Check the updated demo to see my changes.

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