我有這個 SVG 按鈕,我試圖在 hover 時設定影片。我希望按鈕在懸停時具有斑點效果。我希望你們能幫助我。這是SVG的鏈接

抓住錨點并將其向下拖動,直到獲得所需的形狀。
保存 svg 檔案并將最終路徑復制到變形影片命令。

下面是將按鈕輪廓變形為水滴形狀的影片代碼:
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="0 0 169.5451 69.2823">
<defs>
<style>
.fbfb67fb-85bf-41e7-ba32-d1082da05d29 {
fill: #ff83b5;
}
</style>
</defs>
<g id="ee4ac112-3396-4e4b-9bd2-9cf074846425" data-name="Layer 2">
<g id="b0f8822e-1e1e-4dce-a2e6-9a8bebf20196" data-name="Background">
<path id="original" class="fbfb67fb-85bf-41e7-ba32-d1082da05d29" d="M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z" >
<animate
attributeName="d"
begin="original.mouseover"
dur="1s"
fill="freeze"
restart="WhenNotActive"
values="
M77 59C53 56 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-50 35-84 29Z;
M81 113C57 110 1 89 0 40-1 9 39-11 76 7c34 16 84-18 85 23 1 49-45 89-80 83z"
/>
</path>
</g>
</g>
</svg>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/351443.html
標籤:javascript css svg jquery-动画
上一篇:System.Diagnostics.TraceSource不向ApplicationInsights發送資料
下一篇:JSON到HTMLCSS輸出
