transition not working for svg path

问题:

CSS3 transition not working for the SVG path when using linearGradient animate.

#loading-frame {
  transition: all 1s;
  /* fill: transparent; */
  /* fill: blue; */
}
#loading-frame:hover {
  fill: tomato;
}

<svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group" fill="#EAEAEA">
      <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
      id="loading-frame" fill="url(#loading)"></path>
      <linearGradient id="loading" x1="0">
        <stop offset="50%" stop-color="#fdc22d"></stop>
        <stop offset="50%" stop-color="#eaeaea"></stop>
        <animate attributeName="x1" fill="freeze" dur="3s" from="-100%" to="100%" />
      </linearGradient>
    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M65,21 L41,43 L53,47 L46.5,67 L70,44 L58.5,39.5 L65,21 Z" class="thunder" />
  </g>
</svg>

回答1:

Per the SVG specification colours are

Only additive if each value can be converted to an RGB color.

A gradient cannot be converted to a colour so you can't do a smooth transition. It would work if you used two simple fill colours.

#loading-frame {
  transition: all 1s;
  /* fill: transparent; */
  /* fill: blue; */
}
#loading-frame:hover {
  fill: tomato;
}

<svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group" fill="#EAEAEA">
      <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
      id="loading-frame" fill="yellow"></path>

    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M65,21 L41,43 L53,47 L46.5,67 L70,44 L58.5,39.5 L65,21 Z" class="thunder" />
  </g>
</svg>

回答2:

You can't do the transition from inherit to color. You had to define color before like:

#loading-frame {
  transition: all 1s;
  fill: blue;
}
#loading-frame:hover {
  fill: tomato;
}

In your case, you cant duplicate your path to overflow the animation. But It's not a really great solution. :/

#loading-frame {
  transition: all 1s;
  /* fill: transparent; */
  /* fill: blue; */
}

#loading-frame2 {
  transition: all 1s;
  fill: rgba(255, 99, 71, 0);
}
#loading-frame2:hover {
  fill: rgba(255, 99, 71, 1);
}

<svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group" fill="#EAEAEA">
      <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
      id="loading-frame" fill="url(#loading)"></path>
      <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
      id="loading-frame2"></path>
      <linearGradient id="loading" x1="0">
        <stop offset="50%" stop-color="#fdc22d"></stop>
        <stop offset="50%" stop-color="#eaeaea"></stop>
        <animate attributeName="x1" fill="freeze" dur="3s" from="-100%" to="100%" />
      </linearGradient>
    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M65,21 L41,43 L53,47 L46.5,67 L70,44 L58.5,39.5 L65,21 Z" class="thunder" />
  </g>
</svg>

回答3:

One posibility is to change from transitions to animations

#loading-frame:hover {
  animation: tomatize 3s forwards;
}

@keyframes tomatize {
  0%, 10% {fill: yellow;}
  100% {fill: tomato;}
}

<svg id="battery" width="110px" height="88px" viewBox="0 0 110 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Group" fill="#EAEAEA">
      <path d="M104,30.2724875 C104.164709,30.2576038 104.331485,30.25 104.5,30.25 C107.537566,30.25 110,32.7220822 110,35.7458573 L110,53.1708094 C110,56.2060875 107.531385,58.6666667 104.5,58.6666667 C104.331455,58.6666667 104.164681,58.6590557 104,58.6441617 L104,82.0033234 C104,85.3151964 101.311488,88 97.9970362,88 L6.0029638,88 C2.68761844,88 0,85.3182852 0,82.0033234 L0,5.99667663 C0,2.68480358 2.68851188,0 6.0029638,0 L97.9970362,0 C101.312382,0 104,2.68171476 104,5.99667663 L104,30.2724875 L104,30.2724875 Z M5,10.991014 C5,7.68226832 7.68678744,5 11.0051618,5 L92.9948382,5 C96.3113975,5 99,7.68493655 99,10.991014 L99,77.008986 C99,80.3177317 96.3132126,83 92.9948382,83 L11.0051618,83 C7.68860254,83 5,80.3150634 5,77.008986 L5,10.991014 Z"
      id="loading-frame" fill="url(#loading)"></path>
      <linearGradient id="loading" x1="0">
        <stop offset="50%" stop-color="#fdc22d"></stop>
        <stop offset="50%" stop-color="#eaeaea"></stop>
        <animate attributeName="x1" fill="freeze" dur="3s" from="-100%" to="100%" />
      </linearGradient>
    </g>
    <path xmlns="http://www.w3.org/2000/svg" d="M65,21 L41,43 L53,47 L46.5,67 L70,44 L58.5,39.5 L65,21 Z" class="thunder" />
  </g>
</svg>

回答4:

Not quite sure how you are trying to use transition in the css you posted above since your transition seems to be using SVG SMIL animation which is DOM-based, not CSS-based.

I ran your code snippet and the battery outline went from gray to yellow over a few seconds traveling right.

While this worked on Chrome and Safari SMIL animation is not supported in IE and Firefox is buggy.

Also Chrome is depreciating SMIL animation in favor of CSS and web animations and is expected to be dropped in coming versions.

So you might want to remove now and use another method.

http://caniuse.com/#feat=svg-smil