Can't change SVG fill color

Question

I have an SVG. When the user hovers over it I want to change the fill colour on the path. Can someone explain why this isn't working?

 svg:hover { fill: blue; } 

 <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter"> <title>twitter</title> <g fill="none" fill-rule="evenodd"> <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z" fill="#AEB2B4"></path> <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z" fill="#FFF" fill-rule="nonzero"></path> </g> </symbol> </svg> <svg class="icon"> <use xlink:href="#twitter"></use> </svg> 

Answer 1

Css priority

When you defined a fill on a <path> element and on the svg svg:hover.
The path element inline style takes priority over the one defined on the svg.

Answer 2

I think you need to match the svg element, eg:

path:hover {
    fill: blue;
}​

Answer 3

 svg:hover { fill: blue; } svg { fill: #AEB2B4; } 

 <svg width="0" height="0" class="hidden"> <symbol viewBox="0 0 142 142" xmlns="http://www.w3.org/2000/svg" id="twitter"> <title>twitter</title> <g> <path d="M71.5 0C115.23 0 142 36.15 142 71.217c0 35.066-26.77 69.484-70.5 70.783C27.77 143.299 0 106.629 0 71S27.77 0 71.5 0z""></path> <path d="M109 47.34a31.017 31.017 0 0 1-8.956 2.462 15.689 15.689 0 0 0 6.857-8.658A31.142 31.142 0 0 1 97 44.94 15.55 15.55 0 0 0 85.616 40c-8.61 0-15.593 7.01-15.593 15.652 0 1.227.139 2.421.406 3.567-12.958-.652-24.448-6.883-32.14-16.356a15.63 15.63 0 0 0-2.111 7.87 15.667 15.667 0 0 0 6.936 13.028 15.437 15.437 0 0 1-7.062-1.96V62c0 7.584 5.376 13.909 12.508 15.346-1.307.36-2.688.55-4.107.55-1.007 0-1.983-.097-2.934-.28 1.984 6.218 7.74 10.743 14.565 10.87a31.209 31.209 0 0 1-19.366 6.7c-1.256 0-2.5-.073-3.718-.219A43.983 43.983 0 0 0 56.9 102c28.68 0 44.364-23.85 44.364-44.535 0-.678-.015-1.354-.046-2.024A31.687 31.687 0 0 0 109 47.34z" fill="#FFF" fill-rule="nonzero"></path> </g> </symbol> </svg> <svg class="icon"> <use xlink:href="#twitter"></use> </svg>