Wie transformiere ich ein Objekt in SVG, ohne es abzuschneiden?

Question

Ich versuche, Transformation für Bild in der SVG statt IMG in der div anzuwenden. Wie transformiere ich ein Objekt in SVG, ohne es abzuschneiden? das Beispiel zu prüfen und über Bilder schweben, ich brauche Effekt für SVG die gleichen wie rechts 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

Die Lösung ist mehr Platz zur svg Breite und das Bahnelement zu geben. Wenn Sie also das Bild bewegen, wird der Pfad nicht blockiert oder abgeschnitten. Überprüfen Sie die aktualisierte Demo, um meine Änderungen zu sehen.

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