переход не работает для пути svg

-1

CSS3 transition не работает для SVG path при использовании linearGradientanimate.переход не работает для пути svg

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

источник

2015-10-27 Muhammed

Один вешать, чтобы перейти от переходов к анимации

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

источник

2015-10-27 18:55:59 vals

Не совсем уверен, как вы пытаетесь использовать переход в CSS вы вывесили выше, поскольку ваш переход, кажется, использует SVG анимацию SMIL, которая i основанный на DOM, а не на основе CSS.

Я запустил фрагмент кода, и план батареи переместился от серого до желтого в течение нескольких секунд вправо.

В то время как это работало на Chrome и Safari, анимация SMIL не поддерживается в IE, а Firefox - глючит.

Также Chrome обесценивает анимацию SMIL в пользу CSS и веб-анимаций и, как ожидается, будет выпущен в будущих версиях.

Так что вы можете удалить сейчас и использовать другой метод.

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

источник

2015-10-27 19:02:09 haltersweb

Мы не (Mozilla) протестующий SMIL, и мы не уронить. И в этом конкретном случае Firefox не глючит. –

Спасибо @RobertLongson. Я, должно быть, получил дезинформацию отсюда: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL – haltersweb

Там нет дезинформации. Это говорит, что Chrome устарел SMIL, Mozilla не создает Chrome (Google), мы создаем Firefox. –

согласно SVG specification цветов

только аддитивным, если каждое значение может быть преобразован в цвет RGB.

Градиент не может быть преобразован в цвет, чтобы вы не могли сделать плавный переход. Он будет работать, если вы использовали два простых цвета заливки.

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

источник

2015-10-27 19:10:01

Решение, которое вы дали, уничтожает эффекты анимации – Muhammed

Не для меня в Firefox это не так. Переход оживляет цвета, поскольку он должен указывать, что теперь они простые цвета. –

@RobertLongson Что означает OP, так это то, что анимация, предшествующая зависанию, больше не существует – vals

Вы не можете сделать переход от наследовать цвет. Нужно было определить цвет, прежде чем, как:

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

В вашем случае, вы не можете продублировать свой путь к переполнению анимации. Но это не очень хорошее решение. :/

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

источник

2015-10-27 19:58:05 user2711443

переход не работает для пути svg

ответ

Смежные вопросы