How to change both fill and stroke in svg with css

Question

I have a series of black/transparent SVG icons placed inline in my design. I need to change all black fills AND strokes into a custom color on hover.

I can change the fill attribute with css, however, some of the icons are transparent and thus mostly the strokes need changing. Any ideas how to tackle this? The following doesn't work (it only targets the fill)

.icons svg:hover {
fill:#dd6127;  
stroke:#dd6127;

}

UPDATE: As suggested by Anders G, I was not targeting the svg elements correctly, I solved most of my problems but there are still a few lines that refuse to change color :) Take a look at the fiddle

Answer 1

If you wish to use same color for fill and stroke, "currentColor" value and "color" property are useful.
I mase sample. http://jsfiddle.net/defghi1977/KtCht/1/

---

svg code using currentColor value.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle fill="none" stroke="currentColor" stroke-width="30" stroke-miterlimit="10" cx="232.083" cy="200.002" r="182.624"/>
    <g>
        <polygon fill="none" stroke="currentColor" points="..."/>
        <polygon fill="currentColor" stroke="currentColor" points="..."/>
    </g>
</svg>

css code using color property.

svg:hover {
    color:#dd6127;  
}

Answer 2

Fiddling a bit in the blind without any code, but my 5 cents say you need to target the SVG elements (inside the SVG). For instance :

.icons svg:hover rect {
    fill:#dd6127;  
    stroke:#dd6127;
}