我知道我可以在悬停时简单地将一个图像交换为另一个图像，或者可以将精灵的位置移动为背景，但是有什么方法可以通过其他方式更改悬停时svg的填充？
我本来以为下面的方法会起作用，但是发现如果将SVG用作html图像标签的src，它将无法正常工作。
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="17px" viewBox="0 0 24 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
#Page-1:hover #Shape{
fill: #00A49E !important;
}
</style>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Desktop" transform="translate(-454.000000, -1073.000000)" fill-rule="nonzero" fill="#9B9B9B">
<g id="email" transform="translate(454.000000, 1073.000000)">
<g id="Group">
<g id="Shape">
<path d="M22.2254762,0 C23.2055186,0 24,0.797143779 24,1.78716696 L24,15.212833 C24,16.1998581 23.2014771,17 22.2254762,17 L1.77452382,17 C0.794481378,17 0,16.2028562 0,15.212833 L0,1.78716696 C0,0.800141908 0.798522933,0 1.77452382,0 L22.2254762,0 Z M10.6054162,9.87197556 L2.12964982,3.11784921 C1.93425396,2.96214312 1.77777778,3.0378817 1.77777778,3.28512523 L1.77777778,14.7628523 C1.77777778,15.0060917 1.97746978,15.2105263 2.22380231,15.2105263 L21.7761977,15.2105263 C22.0198764,15.2105263 22.2222222,15.0100958 22.2222222,14.7628523 L22.2222222,3.28512523 C22.2222222,3.04188583 22.0646837,2.96298968 21.8703502,3.11784921 L13.3945838,9.87197556 C12.624058,10.4859884 11.3756236,10.4857346 10.6054162,9.87197556 Z M12.3507416,8.42142877 L20.3224534,2.06897091 C20.5152517,1.91533479 20.473415,1.78947368 20.2269738,1.78947368 L3.77302622,1.78947368 C3.52161302,1.78947368 3.48383733,1.91460885 3.67754658,2.06897091 L11.6492584,8.42142877 C11.8420567,8.57506489 12.1570324,8.57579083 12.3507416,8.42142877 Z"></path>
</g>
</g>
</g>
</g>
</g>
</svg>