Question

CSS3 transition在使用path linearGradient时无法使用SVG animate。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

根据SVG specification颜色

如果每个值都可以转换为RGB颜色，则仅添加。

渐变无法转换为颜色，因此您无法进行平滑过渡。如果您使用两种简单的填充颜色，它将起作用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您无法从继承转换为颜色。你必须在之前定义颜色：

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

在您的情况下，您无法复制溢出动画的路径。但它并不是一个非常好的解决方案。：/

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

Answer 3

一个可能性是从过渡到动画

#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>

Answer 4

不太确定你是如何尝试在上面发布的css中使用转换的，因为转换似乎是使用基于DOM的SVG SMIL动画，而不是基于CSS。

我运行了你的代码片段，电池轮廓在几秒钟内从灰色变为黄色。

虽然这适用于Chrome和Safari，但IE浏览器不支持SMIL动画，Firefox也有错误。

此外，Chrome正在贬低SMIL动画，转而支持CSS和网络动画，预计将在未来的版本中删除。

所以你可能想立即删除并使用其他方法。

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

转换不适用于svg路径

4 个答案: