正确使用SVG

Question

​

.change_on_hover:hover {
fill: blue;
cursor: pointer;
}

<svg class="change_on_hover" width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="black" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g transform="translate(2.000000, 7.000000)"  stroke-width="3.2">
            <path d="M82.4167002,49.9034716 C84.8675809,48.3199417 88.5439018,45.7813059 93.4456631,42.0915546 C94.8563844,40.8929994 96,41.2925475 96,42.9875943 L96,81.7585389 C96,83.4648814 94.8652521,83.8649595 93.4456631,82.6640123 C88.3728682,78.5275499 84.5682721,75.7074861 82.0318746,73.961864" id="Layer-1"></path>
            <rect id="Layer-2" x="0" y="40" width="82" height="45" rx="5"></rect>
            <circle id="Layer-3" cx="60" cy="20" r="20"></circle>
            <circle id="Layer-4" cx="20" cy="20" r="20"></circle>
        </g>
    </g>
</svg>
<svg  class="change_on_hover" width="100px" height="100px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M81.23,17H18.77c-3.71,0-6.68,2.43-6.77,5.58V68.32C12,71.45,15,74,18.77,74H48V85H30.5a1.5,1.5,0,0,0,0,3h39a1.5,1.5,0,0,0,0-3H51V74H81.23C85,74,88,71.45,88,68.32V22.68C88,19.55,85,17,81.23,17ZM85,68.32C85,69.77,83.27,71,81.23,71H18.77c-2,0-3.77-1.23-3.77-2.68V22.62C15,21.18,16.73,20,18.77,20H81.23c2,0,3.77,1.23,3.77,2.68Z"/><path d="M55.27,36.63a1.5,1.5,0,0,0-2,.65L45.19,53a1.5,1.5,0,1,0,2.67,1.37l8.06-15.75A1.5,1.5,0,0,0,55.27,36.63Z"/><path d="M64.86,36.08a1.5,1.5,0,0,0-2.12,2.12l7.48,7.47-7.48,7.47a1.5,1.5,0,1,0,2.12,2.12l8.54-8.53a1.5,1.5,0,0,0,0-2.12Z"/><path d="M38.4,36.08a1.5,1.5,0,0,0-2.12,0l-8.54,8.54a1.5,1.5,0,0,0,0,2.12l8.54,8.54a1.5,1.5,0,0,0,2.12-2.12l-7.48-7.47L38.4,38.2A1.5,1.5,0,0,0,38.4,36.08Z"/></svg>

​

为什么有些SVG在悬停时不会改变颜色？

我使用了图像标签，然后链接了我的SVG。我已经使用jquery将图像转换为SVG。有些SVG会改变颜色，有些不会，还有一些会显示混合效果。

Answer 1

正如我所评论的:因为在本例中，您声明了fill="none"。您可以删除fill属性并将其添加到css：.change_on_hover{fill:none;}中

​

.change_on_hover{fill:none;}
.change_on_hover:hover {
fill: blue;
cursor: pointer;
}

<svg class="change_on_hover" width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="black" stroke-width="1"  fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <g transform="translate(2.000000, 7.000000)"  stroke-width="3.2">
            <path d="M82.4167002,49.9034716 C84.8675809,48.3199417 88.5439018,45.7813059 93.4456631,42.0915546 C94.8563844,40.8929994 96,41.2925475 96,42.9875943 L96,81.7585389 C96,83.4648814 94.8652521,83.8649595 93.4456631,82.6640123 C88.3728682,78.5275499 84.5682721,75.7074861 82.0318746,73.961864" id="Layer-1"></path>
            <rect id="Layer-2" x="0" y="40" width="82" height="45" rx="5"></rect>
            <circle id="Layer-3" cx="60" cy="20" r="20"></circle>
            <circle id="Layer-4" cx="20" cy="20" r="20"></circle>
        </g>
    </g>
</svg>

​

第二个例子是不同的。表面上看起来像笔画的东西，实际上是用黑色填充的路径。