SVG 剪輯路徑懸停效果

</標題>
<主要>

<定義>

<圓 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
X 光

<影像高度='100%'preserveAspectRatio='xMinYMin切片'寬度='100%'xlink:href='img/1.png'>
X 光
</g>
</svg>

;

<定義>

<圓 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
蠕蟲

<影像高度='100%'preserveAspectRatio='xMinYMin切片'寬度='100%'xlink:href='img/2.png'>
蠕蟲
</g>
</svg>

<定義>

<圓 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
極光

<影像高度='100%'preserveAspectRatio='xMinYMin切片'寬度='100%'xlink:href='img/3.png'>
極光
</g>
</svg>

;

<定義>

<圓 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
安格斯

<影像高度='100%'preserveAspectRatio='xMinYMin切片'寬度='100%'xlink:href='img/4.png'>
安格斯
</g>
</svg>

<定義>

<圓 cx='0' cy='0' fill='#000' r='150px'>
</clipPath>
</defs>
惠茲 </text>

<影像高度='100%'preserveAspectRatio='xMinYMin切片'寬度='100%'xlink:href='img/5.png'>
惠茲 </text>
</g>
</svg>

;
<div class='item'>
<svg preserveAspectRatio='xMidYMid slice' viewBox='0 0 300 200'>
<defs>
<clipPath id='clip-5'>
<circle cx='0' cy='0' fill='#000' r='150px'></circle>
</clipPath>
</defs>
<text class='svg-text' dy='.3em' x='50%' y='50%'> Dalí </text>
<g clip-path='url(#clip-5)'>
<image height='100%' preserveAspectRatio='xMinYMin slice' width='100%' xlink:href='img/6.png'></#image> <text class='svg-masked-text' dy='.3em' x='50%' y='50%'> Dalí </text>

########################################################################################################. </g>### </svg>### </div>### </div>### </main>### </div>### ### ### CSS3 SVG放大鏡查看圖片代碼是一款採用網格佈局，滑鼠懸停圖片svg剪切路徑動畫特效，具體效果看示範感受一下。 ###

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn