html - 使用 CSS 选择器更改 SVG 填充的颜色/样式

标签 html css svg

我在一些 html 中有这个 SVG 脚本:

<style type="text/css">
    .Circle {
        fill: #ff6666;
     }

     #bin {
        fill: #fff;
     }

     .Line {
        fill: #cccccc;
     }
</style>                                               
<g>
    <circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" />

    <path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" />
    <path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" />
    <path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />       

    <polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " />
    <path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" />
    <path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" />   
</g>

我正在尝试设置它的样式,以便当您将鼠标悬停在“路径”类上时,它会更改“OuterCircle”类的样式。到目前为止,我尝试过的 CSS 似乎不起作用。

我目前的悬停 CSS 是:

.Circle:hover {
    fill: #97D0FF;
}

g.Path:hover > #OuterCircle {
    fill: #97D0FF;
}                                                          

我试过使用不同的兄弟组合器,但似乎没有任何效果,将 circle 属性放在 path 属性下面会弄乱 svg 图像。我不太确定这如何与 svg 一起使用。

最佳答案

CSS 中没有“previous sibling”选择器,因此您不能在 .Path:hover 上设置 #OuterCircle 的样式。

但是,您可以向父组添加一个类,并在悬停该组时设置 #OuterCircle 样式。

.Circle {
  fill: #ff6666;
}

#bin {
  fill: #fff;
}

.Line {
  fill: #cccccc;
}

g.icon:hover #OuterCircle {
  fill: #97D0FF;
}
<svg>
  <g class="icon">
    <circle class="Circle" id="OuterCircle" cx="15.8" cy="15.2" r="15.2" />

    <path class="Path" id="bin" d="M9.6,7.6C9.2,7.8,9,8.3,9.1,8.6c0.1,0.3,0.4,0.5,0.5,0.5h12.5c0.4-0.2,0.6-0.6,0.5-1c-0.1-0.3-0.4-0.5-0.5-0.5h-9H9.6z" />
    <path class="Path" id="bin" d="M13.9,6.7c-0.5,0.3-0.8,0.7-1,1c0.3,0,0.6,0,1,0c0-0.2,0-0.3,0-0.5h3.8c0,0.2,0,0.3,0,0.5c0.3,0,0.7,0,1,0c-0.2-0.3-0.5-0.7-1-1C16.6,6,15.1,5.9,13.9,6.7z" />
    <path class="Path" id="bin" d="M9.6,9.6h12.5l-1,14.9c0,0-0.1,0.4-0.5,0.5c-0.2,0.1-0.4,0-0.5,0c-2.9,0-5.8,0-8.7,0c-0.1,0-0.3,0.1-0.5,0c-0.3-0.1-0.5-0.4-0.5-0.5C10.2,19.5,9.9,14.5,9.6,9.6z" />       

    <polygon class="Line" points="14.5,12 17.1,12 16.7,22.8 15,22.8 " />
    <path class="Line" d="M18,12v10.8h1.7c0.3-3.8,0.6-7.5,0.9-11.3C19.8,11.7,18.9,11.8,18,12z" />
    <path class="Line" d="M11,11.5c0.9,0.2,1.8,0.3,2.6,0.5v10.8h-1.7C11.9,22.8,11.9,22.8,11,11.5z" />   
</g>
</svg>

关于html - 使用 CSS 选择器更改 SVG 填充的颜色/样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42416564/

相关文章:

javascript - 如何避免切换 "embedded"HTML 元素?

css - SVG 无法在绝对定位的父级中正确调整大小

javascript - 如何使用 svg <clipPath> 剪辑 Leaflet geoJSON 图层

css - Firefox 中不显示背景

javascript - 溢出隐藏更改内容位置

javascript - 如何在独立于主题的节点页面添加css和js文件?

javascript - 如何使用 d3.js 创建响应式 svg

html - 为什么 `position:absolute;` 销毁 ` vertical-align:middle` ?

javascript - 交换 img src 或显示/隐藏多个图像是否更快?

html - 选择空间高度 - HTML