如何轉換SVG中的對象而不切斷？

我試圖在SVG中應用圖像轉換，而不是在div中IMG。如何在不中斷的情況下轉換SVG中的對象？檢查示例和懸停以上的圖像，需要使用SVG效果相同右格如何轉換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"> 
 
<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>

來源

2016-12-07 V. Logvinenko

他們看起來非常相似我。 –

@RobertLongson對不起，我忘了澄清，需要懸停在圖像上方 –

解決方案是給到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>

來源

2016-12-07 11:30:54 balapa

如何轉換SVG中的對象而不切斷？

回答

相關問題