猿问

鼠标悬停时如何更改图标

我有两个 svg 图标，当将鼠标指针悬停在 html 上时，我想在 html 中从一个图标更改为另一个图标，但是我对图标很陌生，有人可以帮忙吗？


我想让白色图标在用鼠标指向它时变成黑色。我正在尝试制作一个带有链接的“设置图标”；）


我这里有 svg 代码：


<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">

  <style type="text/css">

    .st0 {

      fill: #393B3D;

    }

    .st1 {

      fill: #7B7C7D;

    }


    .st2 {

      fill: #767879;

    }


  </style>


  <g id="settings-on_1_">

    <path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9

        c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0

        l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2

        c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2

        c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4

        l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6

        S45.3,104,42,104z"></path>

  </g>

    </g>

    <g>

      <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4

            S16.2,94,14,94z"></path>

    </g>

  </g>

</svg>


慕神8447489
浏览 170回答 4
4回答

噜噜哒

在此输入链接描述请参考上面的示例并动态传递您的图像！<!DOCTYPE html><html><body><img onmouseover="changeImg(this)" id="myImage" onmouseout="normalImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="62" height="62"><p>On Image hover Example</p><script>var image = document.getElementById('myImage');function changeImg(x) {&nbsp; image.src = "https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png";}function normalImg(x) {&nbsp;image.src = "https://www.w3schools.com/jsref/smiley.gif";}</script></body></html>请尝试更改为我为 PNG 所做的SVG 。步骤去做。尝试实现 onHover 事件实现两个函数onHover和normal函数现在通过使用 document.getElementById('myImage') 获取 Id 将永久图像添加到普通函数对另一张图像执行同样的操作
0

明月笑刀无情

<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">&nbsp; <style type="text/css">&nbsp; &nbsp; .st0 {&nbsp; &nbsp; &nbsp; fill: #393B3D;&nbsp; &nbsp; }&nbsp; &nbsp; .st1 {&nbsp; &nbsp; &nbsp; fill: #7B7C7D;&nbsp; &nbsp; }&nbsp; &nbsp; .st2 {&nbsp; &nbsp; &nbsp; fill: #767879;&nbsp; &nbsp; }&nbsp; </style>&nbsp; <g id="settings-on_1_">&nbsp; &nbsp; <path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0&nbsp; &nbsp; &nbsp; &nbsp; l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2&nbsp; &nbsp; &nbsp; &nbsp; c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2&nbsp; &nbsp; &nbsp; &nbsp; c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4&nbsp; &nbsp; &nbsp; &nbsp; l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6&nbsp; &nbsp; &nbsp; &nbsp; S45.3,104,42,104z"></path>&nbsp; </g>&nbsp; <g id="settings_1_">&nbsp; &nbsp; <g>&nbsp; &nbsp; &nbsp; <path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.5,0.1,0.8,0.5,0.8,1V108z"></path>&nbsp; &nbsp; </g>&nbsp; &nbsp; <g>&nbsp; &nbsp; &nbsp; <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; S16.2,94,14,94z"></path>&nbsp; &nbsp; </g>&nbsp; </g></svg>这是您要求的“johannchopin”设置的新代码_1_&nbsp;<style type="text/css">&nbsp;</style>&nbsp;<g id="settings_1_" transform="translate(-2,-86)">&nbsp; &nbsp;<g>&nbsp; &nbsp; &nbsp;<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0.5,0.1,0.8,0.5,0.8,1V108z"/>&nbsp; &nbsp;</g>&nbsp; &nbsp;<g>&nbsp; &nbsp; &nbsp;<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;S16.2,94,14,94z"/>&nbsp; &nbsp;</g>&nbsp;</g>&nbsp;<use id="elUse" xlink:href="#settings_1_"/></svg>&nbsp; ```And here is setting_on_1.svg ```<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="navigation" x="1px" y="1px" width="27px" height="27px" viewBox="0 0 1 9,5" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">&nbsp;<g id="settings-on_1_">&nbsp; <g transform="translate(-29,-85)" id="settings_on_1_">&nbsp; &nbsp;<path id="setting" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;S45.3,104,42,104z"/>&nbsp;</g></g></svg>```
0

慕尼黑5688855

我已将图标放入 defs 元素中。另外，由于元素在绘制时在 svg 画布上具有不同的位置，因此我将它们转换回相同的位置。我将第一个图标与<use>元素一起使用。接下来我使用 javascript 来更改 on mouseover 和 mouseleaave 的值xlink:href。我希望它有帮助const SVG_XLINK = "http://www.w3.org/1999/xlink";navigation.addEventListener("mouseover",(e)=>{&nbsp; elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_on_1_');})navigation.addEventListener("mouseleave",(e)=>{&nbsp; elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_1_');})body{background:white;}svg{border:solid}<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px"&nbsp; viewBox="0 0 24 24"&nbsp; >&nbsp; <style type="text/css">&nbsp; &nbsp; .st0 {&nbsp; &nbsp; &nbsp; fill: #393B3D;&nbsp; &nbsp; }&nbsp; &nbsp; .st1 {&nbsp; &nbsp; &nbsp; fill: #7B7C7D;&nbsp; &nbsp; }&nbsp; &nbsp; .st2 {&nbsp; &nbsp; &nbsp; fill: #767879;&nbsp; &nbsp; }&nbsp; </style><defs>&nbsp; <g id="settings_on_1_" transform="translate(-30,-86)">&nbsp; &nbsp; <path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0&nbsp; &nbsp; &nbsp; &nbsp; l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2&nbsp; &nbsp; &nbsp; &nbsp; c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2&nbsp; &nbsp; &nbsp; &nbsp; c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4&nbsp; &nbsp; &nbsp; &nbsp; l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6&nbsp; &nbsp; &nbsp; &nbsp; S45.3,104,42,104z"></path>&nbsp; </g>&nbsp; <g id="settings_1_" transform="translate(-2,-86)">&nbsp; &nbsp; <g>&nbsp; &nbsp; &nbsp; <path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; c0.5,0.1,0.8,0.5,0.8,1V108z"></path>&nbsp; &nbsp; </g>&nbsp; &nbsp; <g>&nbsp; &nbsp; &nbsp; <path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; S16.2,94,14,94z"></path>&nbsp; &nbsp; </g>&nbsp; </g>&nbsp; </defs>&nbsp;&nbsp;&nbsp; <use id="elUse" xlink:href="#settings_1_" /></svg>
0

智慧大石

您可以只使用一个 svg，然后使用当svg:hover您将鼠标悬停在其上时希望其显示的颜色。svg:hover {&nbsp; fill: red/black/...;}
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答