css - 悬停时更改 SVG 填充

Question

我正在尝试在悬停时更改 Path #Fill-1 填充颜色。

 <svg version="1.1"  id="Layer_1" 
        <g id="UI-Kit" sketch:type="MSPage">
            <g id="Icons" transform="translate(-86.000000, -283.000000)" sketch:type="MSArtboardGroup">
                <g id="Fill-1-_x2B_-Fill-2-_x2B_-Fill-3" transform="translate(86.000000, 283.000000)" sketch:type="MSLayerGroup">
                    <path id="Fill-1" sketch:type="MSShapeGroup" fill="#FFA400" d="M22.166,0.184c-12.161,0-22.054,9.893-22.054,22.054
                        s9.893,22.054,22.054,22.054s22.055-9.894,22.055-22.054S34.327,0.184,22.166,0.184"/>

                    <path id="Fill-2" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M23.906,22.229c0-2.794,0.002-5.588-0.002-8.382
                        c-1.084-0.016-1.998-0.959-2.026-2.039c-0.003-0.133-0.005-0.266-0.005-0.398V22.229"/>
                </g>
            </g>
        </g>
        </svg>

这是我的 CSS:

svg > path#Fill-1:hover {
    fill:red;
}

但是悬停时没有任何反应。请检查 JSfiddle http://jsfiddle.net/vww63s0s/

Answer 1

您可以直接引用 Fill-1，因为它是一个 ID。

#Fill-1:hover {
    fill:red;
}

<svg version="1.1"  id="Layer_1" class="red">
        <g id="UI-Kit" sketch:type="MSPage">
            <g id="Icons" transform="translate(-86.000000, -283.000000)" sketch:type="MSArtboardGroup">
                <g id="Fill-1-_x2B_-Fill-2-_x2B_-Fill-3" transform="translate(86.000000, 283.000000)" sketch:type="MSLayerGroup">
                    <path id="Fill-1"sketch:type="MSShapeGroup" fill="#FFA400" d="M22.166,0.184c-12.161,0-22.054,9.893-22.054,22.054
                        s9.893,22.054,22.054,22.054s22.055-9.894,22.055-22.054S34.327,0.184,22.166,0.184"/>

                    <path id="Fill-2" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M23.906,22.229c0-2.794,0.002-5.588-0.002-8.382
                        c-1.084-0.016-1.998-0.959-2.026-2.039c-0.003-0.133-0.005-0.266-0.005-0.398V22.229"/>
                </g>
            </g>
        </g>
</svg>