I can not get around this. No matter what I do, I can not have the fill change on my svg. I have tried using <set> and <animate> and neither does anything. However, when I change to set or animate fill-opacity, everything works fine. What am I doing wrong? Is the file just totally unusable for this?
Below is the section of the code that I have edited.
<g id="english">
<animate attributeType="CSS"
attributeName="fill" from="black" to="red"
begin="tEnglish.mouseover" dur="1s"
fill="freeze" />
<animate attributeType="CSS"
attributeName="fill" from="red" to="black"
begin="tEnglish.mouseout" dur="1s" fill="freeze"
/>
<path id="gy" fill="black"
stroke="#FFFFFF" stroke-width="0.5"
d="M380.146,251.012c0.226-0.444,0.605-0.66,0.54
-1.346
c-0.044-0.463,0.167-0.603,0.447
-0.756c0.063-0.035,0.225-0.314,0.438-
0.173c0.271,0.181,0.255-0.015,0.49-0.179
c0.207-0.144,0.609-0.246,0.717-
0.446c0.094-0.175-0.053-0.438-0.277-0.358c-
0.561,0.199-0.262-0.371-0.498-0.68
c-0.215-0.281,0.054-0.604,0.233
-0.826c0.226-0.279,0.18-0.264,0.503-0.429c0.435
-0.222,0.672-0.663,1.067-0.854
c0.537-0.26,0.107-0.456-0.137-
0.896c0.364,0.427,0.897,0.708,1.318,1.071c-
0.203-0.311-0.623-0.385-0.781-0.736
c0.516,0.233,1.056,0.572,1.438,0.996c0.309,0.341
,0.699,1.002,1.081,1.225c0.426,0.248,0.536,1.047
,0.385,1.467
c-0.112,0.314-0.275,0.529-
0.315,0.876c-0.034,0.3-0.042,0.626-
0.22,0.884c0.591-0.108,0.145-1.553,1.055-1.229
c0.684,0.243,1.522,0.729,1.689,1.519c0.444-
0.4,0.76,0.428,0.822,0.746c0.108,0.554-
0.104,1.391-0.463,1.822
c0.598,0.168,0.085,0.596-
0.051,0.759c-0.131,0.156-1.692-0.335-
1.604,0.69c0.054,0.624,0.046,1.03-0.051,1.643
c-
0.065,0.412,0.305,1.228,0.605,1.506c0.308,0.285,
0.103,0.627,0.563,0.692c0.096,0.014,0.347-
0.106,0.405-0.014
c0.189,0.298,0.214,0.666,0.267,1.005c0.098,0.631
,0.754,1.145,0.754,1.766c0,0.631,0.714,0.611,0.9
39,0.994
c-0.764,0.488-1.506-0.496-
2.236,0.104c-0.123,0.101-0.195,0.237-
0.305,0.348c-0.201,0.205-0.456,0.116-0.7,0.201
c-0.446,0.155-0.467,0.378-
0.994,0.384c-0.163,0.003-0.257,0.131-
0.363,0.234c-0.08,0.014-0.155,0.044-0.223,0.09
c0.02,0.093,0.031,0.186,0.036,0.281c-
0.116,0.232-0.762,0.336-0.997,0.255c-0.164-
0.056-0.059-0.245-0.291-0.247
c-0.185-0.002-0.556-0.141-0.626
-0.33c-0.112-0.307-0.553-0.783-0.892-0.83c0.031
-0.073,0.061-0.148,0.09-0.223
c-0.313,0.02-0.276-0.261-0.238-
0.475c0.065-0.373-0.031-0.517-0.257-0.788c-
0.372-0.45-0.354-1.307-0.239-1.839
c0.089-0.412,0.394-0.789,0.396-
1.223c0.001-0.375,0.105-0.348,0.323-0.664c0.136
-0.198,0.426-0.547,0.298-0.783
c-0.103-0.189-0.372-0.454-0.372
-0.68c0-0.218,0.115-0.426-0.136-0.535c-0.174-
0.075-0.615-0.082-0.722-0.262
c-0.101-0.168,0.249-0.673,0.284
-0.868c0.057-0.325,0.015-0.702-0.244-0.936c-
0.387-0.349-1.021,0.2-1.49-0.031
C381.053,252.659,380.398,251.559,380.146,251.012
"/>
</g>
I tried also
<set attributeType="CSS"
attributeName="fill" from="black" to="red"
begin="tEnglish.mouseover" end="tEnglish.mouseout"
/>
But nothing seems to work. Is this just not something you can do in SVG with a Path object? I am totally vexed.
Thank you all in advance for your help.
SVG set fill
Re: SVG set fill
css support for svg is pretty patchy....nevertheless i think your issue is that you might be confusing svg/css/dom attribute names and allowable values...or is that me getting confused?