SVG圖示的滑鼠移動影片 -有解無憂

我正在創建一個網頁，下面的SVG是由兩個不同的SVG圖示的代碼組合而成的。

我想在mouseover時將圖示的可見性從可見變為隱藏，反之亦然。

下面的CSS是我寫的，但它并不作業。

。

#icon1：hover{
  visibility: hidden;
}

#icon2:hover {
  visibility: visible;
}

<svg xmlns="http://www.w3. org/2000/svg" width="30" height="30" fill="#E0EADF" class="bi bi-emoji-smile mr-2"/span> viewBox="0 0 17 17"/span> style="position: relative;top: 0px;left: 0px;">
  < path visibility=" visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 16z"/span>/> 
  < path visibility=" visible" id="icon1" d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1.183-. 683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1.672-1.5S9.448 5 10 5s1 .672 1 1.5z"/span>/>/span>
  < path visibility="hidden"/span> id="icon2" d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4。 498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1.672-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5 .5 0 0 1 .68.194.934.934 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1.194-.68z"/span>/> /span>
</svg>/span>

能否請您指導我如何實作這一目標？另外，是否有可能創建一個CSS影片，使可見性以5s的間隔無限地改變？

uj5u.com熱心網友回復：

嘗試在前面添加svg :

。

svg：hover #icon1{
  visibility: hidden;
}
svg:hover #icon2{
  visibility: visible;
}

<svg xmlns="http://www.w3. org/2000/svg" width="30" height="30" fill="violet" class="bi bi-emoji-smile mr-2"/span> viewBox="0 0 17 17"/span> style="position: relative;top: 0px;left: 0px;">
          < path visibility=" visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 16z"/span>/> 
          < path visibility=" visible" id="icon1" d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1.183-. 683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1.672-1.5S9.448 5 10 5s1 .672 1 1.5z"/span>/>/span>
          < path visibility="hidden"/span> id="icon2" d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4。 498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1.672-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5 .5 0 0 1 .68.194.934.934 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1.194-.68z"/span>/> /span>
</svg>/span>

uj5u.com熱心網友回復：

似乎作業正常，但是一旦你把visibility設定為hidden，你就不再懸停了。也許可以用筆觸顏色透明來代替？

然后添加一個過渡。

。

svg {
  height: 90vh;
  display: block;
  margin: 2em auto;
}

svg path {
  stroke: red;
  填充：無。
  transition: stroke 1s ease;
}

#icon1:hover,
#icon2:hover {
  行程：透明。
}

<svg xmlns="http://www.w3. org/2000/svg" fill="#E0EADF" class="bi bi-emoji-smile mr-2" viewBox="0 0 30 30"> 
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 16z"/span>/>
          <path id="icon1"/span> d="M4.285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4.498 0 0 3.898-2.25.5.5 0 0 1 .183-. 683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1.672-1.5S9.448 5 10 5s1 .672 1 1.5z"/span>/>/span>
          < path visibility="hidden" id="icon2" d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4。 498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1.672-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5 .5 0 0 1 .68.194.934.934 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1.194-.68z"/span>/> /span>
</svg>/span>

uj5u.com熱心網友回復：

對于改變圖示可見度的CSS影片，請嘗試以下內容

。

span class="hljs-selector-class">.icon_animate_1{
  animation: icon_frame1 3s step ended infinite;
}

@keyframes icon_frame1{
  0% {opacity: 1; }
  90% {opacity: 0; }
  100% {opacity: 1; }
}

.icon_animate_2{
  animation: icon_frame2 3s step-end infinite;
}

@keyframes icon_frame2{
  0% {opacity: 0; }
  90% {opacity: 1; }
  100% {opacity: 
}

<svg xmlns="http://www.w3. org/2000/svg" width="30" 高度="30" fill="#5F77F1" class="bi bi-emoji-smile mr-2" viewBox="0 0 17 17"> 
          < path visibility="visible" d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 16z"/span>/> 
          <path class="icon_animate_1"/span> d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1.183-. 683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1.672-1.5S9.448 5 10 5s1 .672 1 1.5z"/span>/>/span>
          <path class="icon_animate_2"/span> d="M4。 285 9.567a.5 .5 0 0 1 .683.183A3.498 3.498 0 0 8 11.5A3.498 3.498 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5A4.498 4。 498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1.672-1.5S5.448 5 6 5s1 .672 1 1.5zm1.757-.437a.5 .5 0 0 1 .68.194.934.934 0 0 .813.493c.339 0 .645-.19.813-.493a.5.5 0 1 1 .874.486A1.934 1.934 0 0 1 10.25 7.75c-.73 0-1.356-.412-1.687-1.007a.5.5 0 0 1.194-.68z"/span>/> /span>
</svg>/span>

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

標籤：

上一篇：不能在不繼承舊項的情況下向arrayList添加項

下一篇：如何將兩個pathlib.PosixPath路徑連接成一個？