转换不适用于svg路径 [英] transition not working for svg path

问题描述

CSS3 transition对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>

推荐答案

每个 SVG规范颜色是

仅当每个值都可以转换为RGB颜色时才加法.

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>

这篇关于转换不适用于svg路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！