SVG影像在懸停期間更改為不同的SVG影像（不是過濾器）-有解無憂

我有一個 HTML 格式的 SVG 影像，它是在 Figma 中創建的，您可以在下面找到。

現在，當滑鼠懸停在它上面時，我希望 SVG 影像變成一個完全不同的 SVG 影像。懸停的影像具有以下 SVG 代碼：

我想問幫助我如何在 CSS 中做到這一點？我知道有一個 CSS 懸停屬性 background: url("images/card-back.jpg")

但是，我不想保留懸停的前景影像。有沒有一種不使用復雜 JS 的方法來做到這一點？或者在 CSS 中做到這一點的方法？

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>

<svg width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_260_257)">
<rect x="7" y="7.29297" width="157" height="173" rx="16" fill="white"/>
<rect x="8.5" y="8.79297" width="154" height="170" rx="14.5" stroke="#DAFDF5" stroke-width="3"/>
</g>
<path d="M7 20.8834C7 20.8834 7.5 17.0996 10 13.793C13 9.82503 16.4741 8.79297 16.4741 8.79297V178.977C16.4741 178.977 13.5 178.293 10.5 174.293C7.5 170.293 7 167.024 7 167.024V20.8834Z" fill="#04ACA7"/>
<defs>
<filter id="filter0_d_260_257" x="0" y="0.292969" width="179" height="195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="5.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.854902 0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0.9 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_260_257"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_260_257" result="shape"/>
</filter>
</defs>
</svg>

<script src="logic.js"></script>

  </body>
</html>

<-----------SVG code of the image appearing when hovered---------->

<svg width="102" height="88" viewBox="0 0 102 88" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.0806 39.4139L51.082 74.4153L86.0834 39.4139C89.1779 36.3194 90.9164 32.1223 90.9164 27.7459C90.9164 23.3695 89.1779 19.1724 86.0834 16.0779C84.5511 14.5456 82.732 13.3301 80.73 12.5009C78.728 11.6716 76.5823 11.2448 74.4153 11.2448C70.039 11.2448 65.8419 12.9833 62.7473 16.0779L51.082 27.7431L39.4167 16.0834C36.3143 13.0303 32.1311 11.3269 27.7784 11.3441C23.4258 11.3613 19.2562 13.0978 16.178 16.1752C13.0998 19.2527 11.3624 23.4219 11.3441 27.7745C11.3259 32.1272 13.0283 36.3108 16.0806 39.4139ZM47.1936 8.2955L51.082 12.1839L54.9704 8.2955C57.5199 5.72358 60.5523 3.68056 63.8935 2.28372C67.2347 0.886878 70.8189 0.163735 74.4403 0.155805C78.0617 0.147875 81.649 0.855314 84.9963 2.23751C88.3435 3.6197 91.3848 5.64943 93.9456 8.21016C96.5063 10.7709 98.536 13.8122 99.9182 17.1595C101.3 20.5067 102.008 24.094 102 27.7155C101.992 31.3369 101.269 34.921 99.872 38.2622C98.4752 41.6034 96.4322 44.6358 93.8602 47.1853L54.9759 86.0751C54.4651 86.5864 53.8586 86.9921 53.1909 87.2689C52.5232 87.5457 51.8075 87.6881 51.0848 87.6881C50.362 87.6881 49.6463 87.5457 48.9786 87.2689C48.3109 86.9921 47.7044 86.5864 47.1936 86.0751L8.30379 47.1908C5.69689 44.6495 3.62055 41.6159 2.1952 38.2659C0.769861 34.9159 0.0238901 31.3162 0.000564486 27.6757C-0.0227611 24.0352 0.677023 20.4262 2.05932 17.0582C3.44162 13.6903 5.47892 10.6303 8.05304 8.05579C10.6272 5.48131 13.6869 3.44358 17.0546 2.0608C20.4224 0.678024 24.0313 -0.0222708 27.6718 0.000539839C31.3123 0.0233505 34.9121 0.768812 38.2623 2.19368C41.6125 3.61855 44.6464 5.69446 47.1881 8.301L47.1936 8.2955Z" fill="#B3B3B3"/>
</svg>

uj5u.com熱心網友回復：

嘗試這個：

<div style='position: absolute; top: /*vertical position of SVGs*/; left: /*horizontal position of SVGs*/; width: /*width of SVGs*/; height: /*height of SVGs*/;' onmouseover="document.getElementById('svg1').style.display = 'none'; document.getElementById('svg2').style.display = '';" onmouseout="document.getElementById('svg1').style.display = ''; document.getElementById('svg2').style.display = 'none';"></div>
<svg id="svg1"></svg>
<svg id="svg2" style="display: none;"></svg>

如果實施得當，它應該可以解決問題。如果它不起作用，請嘗試將您的設定發送給我（設定閱讀器鏈接：）data:text/html,<script>document.write(JSON.stringify(window.navigator));</script>，我會看看可以進行哪些修復。

uj5u.com熱心網友回復：

我們需要解決的問題

本質上，您需要隱藏影像并使用background-image屬性顯示您想要的內容。您只需使用標準:hover選擇器，它將影像設定為隱藏（使用不透明度），并使用 SVG 的背景影像進行重繪。你需要對你的 SVG 進行編碼，我使用這個小工具：URL Decoder—Convert garbled address。（來源：MDN 網路檔案：fill-opacity和MDN 網路檔案：stroke-opacity。）這是 CSS...

TLDR，100% 僅 CSS 修復

#hover-box:hover {
    fill-opacity: 0;
    stroke-opacity: 0;
    background-repeat: no-repeat;
    background-image: url("data:image/svg xml, ***encoded SVG***");
}

作業 SO 演示

在這里它與您的代碼一起使用：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <STYLE>



#hover-box:hover {
fill-opacity: 0;
stroke-opacity: 0;
background-repeat: no-repeat;
background-image: url("data:image/svg xml,    ");
}
</STYLE>
  </head>
  <body>

<svg id="hover-box" width="179" height="196" viewBox="0 0 179 196" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d_260_257)">
<rect x="7" y="7.29297" width="157" height="173" rx="16" fill="white"/>
<rect x="8.5" y="8.79297" width="154" height="170" rx="14.5" stroke="#DAFDF5" stroke-width="3"/>
</g>
<path d="M7 20.8834C7 20.8834 7.5 17.0996 10 13.793C13 9.82503 16.4741 8.79297 16.4741 8.79297V178.977C16.4741 178.977 13.5 178.293 10.5 174.293C7.5 170.293 7 167.024 7 167.024V20.8834Z" fill="#04ACA7"/>
<defs>
<filter id="filter0_d_260_257" x="0" y="0.292969" width="179" height="195" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="4" dy="4"/>
<feGaussianBlur stdDeviation="5.5"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.854902 0 0 0 0 0.992157 0 0 0 0 0.960784 0 0 0 0.9 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_260_257"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_260_257" result="shape"/>
</filter>
</defs>
</svg>

<script src="logic.js"></script>

  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/366436.html

標籤：javascript html css svg

上一篇：如何將線性漸變應用于<use>標簽中的SVG<symbol>？

下一篇：Svg顏色不會從css顏色改變？