Кнопка наведения и замена SVG-фильтра в <use> с CSS

У меня есть теневой эффект, который я сделал с фильтром SVG, чтобы оставаться гибким для множества вариантов контуров. Я применяю этот фильтр на <use> -элементах и хочу обмениваться этим фильтром, когда пользователь наводит кнопку родительского контроля.Кнопка наведения и замена SVG-фильтра в <use> с CSS

Обмен представляется важным здесь, потому что применение «нового» фильтра при наведении работает во всех основных браузерах. Но изменить его от заданного фильтра к другому фильтру, похоже, работает только в Edge?

CodePen пример должен пролить свет на вещи: http://codepen.io/katerlouis/pen/pRmyoR

Все, что я хочу, чтобы переключаться между фильтрами при наведении с помощью CSS. Пожалуйста, не javascript решения.

Странно, иногда нажатие кнопки приводит к применению фильтра, который должен срабатывать при зависании.

Я нахожусь на последнем 2013 MBPr 15 '', управляющем El Capitan 10.11.6. Также были протестированы на других компьютерах Mac в те же результаты. В Edge 14 (Browserstacks Chromeplugin) кнопки работают нормально. Не удалось выполнить Firefox (51), Chrome (56) и Safari (9.1.3).

источник

2017-02-17 kater louis

Sorry- Я не понимаю: O Первый фильтр (имеющий feComposite Aswell) применяется с помощью CSS в одиночку работает просто отлично. Пожалуйста, просветите меня :) –

Это обходное решение.

Абсолютно положение кнопки (т.е. один над другим)
Заверните кнопки в контейнере (<div id="t">)
использования контейнеры парить .t:hover событие, чтобы скрыть требуемую кнопку.

Пример:

body { 
 
    padding: 40px; 
 
    background: #003A63; 
 
    color: white; 
 
} 
 

 
button { 
 
    background: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 0; 
 
    outline: 0; 
 
} 
 

 
.button1 .outline { 
 
    fill: white; 
 
    filter: url(#button-neutral); 
 
} 
 

 
.button1 .fill { 
 
    fill: #FFED00; 
 
} 
 

 
.button1:hover .outline { 
 
    filter: url(#button-hover); 
 
} 
 

 
.button2 .outline { 
 
    fill: white; 
 
} 
 

 
.button2 .fill { 
 
    fill: #CD1719; 
 
} 
 

 
.button2:hover .outline { 
 
    filter: url(#button-hover); 
 
} 
 

 
.t:hover .button1 { 
 
    z-index: -1; 
 
} 
 

 
.button1, 
 
.button12 { 
 
    position: absolute; 
 
}

Button with filter on both 
 
<div class="t"> 
 
    <button class="button1"> 
 
\t <svg> 
 
\t \t <use class="fill" xlink:href="#button-large-fill" /> 
 
\t \t <use class="outline" xlink:href="#button-large-outline1" /> 
 
\t </svg> 
 
</button> 
 

 
    <button class="button2"> 
 
\t <svg> 
 
\t \t <use class="fill" xlink:href="#button-large-fill" /> 
 
\t \t <use class="outline" xlink:href="#button-large-outline1" /> 
 
\t </svg> 
 
</button> 
 
</div> 
 

 
<svg version="1.1" class="hidden-svg"> 
 
\t <defs> 
 
\t \t <filter id="button-neutral"> 
 

 
\t \t  <!-- Um den weißen rahmen des buttons nach oben zu schieben mit dem filter --> 
 
\t \t  <feOffset in="SourceGraphic" dx="0" dy="-3" result="sourceCopy" /> 
 

 
\t \t  <feOffset in="SourceAlpha" dx="0" dy="1" result="innenSchatten" /> 
 

 
\t \t  <feFlood flood-color="gray" flood-opacity="0.8" result="innenSchatten-gefaerbt" /> 
 
\t \t  <feComposite in="innenSchatten-gefaerbt" in2="innenSchatten" operator="in" result="final" /> 
 

 
\t \t  <feBlend in="final" in2="" mode="multiply" /> 
 

 

 
\t \t \t <feFlood flood-color="green" result="lol" /> 
 
\t \t \t <feComposite in="lol" in2="SourceAlpha" operator="atop" result="lol2" /> 
 
\t \t  
 

 
\t \t  <!-- Put everything together. Blur then graphic. --> 
 
\t \t \t <feMerge> 
 
\t \t \t \t <feMergeNode in="final"/> 
 
\t \t \t \t <feMergeNode in="sourceCopy" /> 
 
\t \t \t </feMerge> 
 
\t \t </filter> 
 

 

 
\t \t <filter id="button-hover"> 
 

 
\t \t  <!-- Um den weißen rahmen des buttons nach oben zu schieben mit dem filter --> 
 
\t \t  <feOffset in="SourceGraphic" dx="0" dy="0" result="sourceCopy" /> 
 

 
\t \t  <feOffset in="SourceAlpha" dx="0" dy="2" result="innenSchatten" /> 
 

 
\t \t  <feFlood flood-color="gray" flood-opacity="1" result="innenSchatten-gefaerbt" /> 
 
\t \t  <feComposite in="innenSchatten-gefaerbt" in2="innenSchatten" operator="in" result="final" /> 
 

 
\t \t  <feBlend in="final" in2="" mode="multiply" /> 
 

 

 
\t \t \t <feFlood flood-color="green" result="lol" /> 
 
\t \t \t <feComposite in="lol" in2="SourceAlpha" operator="atop" result="lol2" /> 
 
\t \t  
 

 
\t \t  <!-- Put everything together. Blur then graphic. --> 
 
\t \t \t <feMerge> 
 
\t \t \t \t <feMergeNode in="final"/> 
 
\t \t \t \t <feMergeNode in="sourceCopy" /> 
 
\t \t \t </feMerge> 
 
\t \t </filter> 
 

 
\t </defs> 
 

 

 
\t <symbol id="button-large-outline1" viewBox="0 0 255 48.9"> 
 

 
\t \t <path d="M252.7,15.6c-1.3-3.2-3.3-6.1-5.8-8.4c-2.3-2.2-5.1-3.8-8-4.9c-0.4-0.1-0.7-0.3-1.1-0.4l-1.1-0.3c-0.8-0.2-1.5-0.3-2.3-0.4 
 
\t \t \t \t c-0.8-0.1-1.6-0.2-2.4-0.2c-0.8,0-1.5,0-2.2,0l-28.3,0.2c-2-0.1-4-0.2-6-0.2c-5.7-0.2-11.4-0.4-17.1-0.5l-8.6-0.2L161.2,0 
 
\t \t \t \t c-11.4-0.1-22.8,0-34.2,0.2C104.1,0.7,81.3,1.8,58.4,2C47,2.1,35.6,2.1,24.2,2c-0.7,0-1.4,0-2.2,0c-0.8,0-1.5,0-2.3,0.2 
 
\t \t \t \t c-0.8,0.1-1.5,0.2-2.2,0.4l-1.1,0.3c-0.4,0.1-0.7,0.2-1.1,0.4c-2.9,1-5.5,2.5-7.8,4.6c-2.3,2-4.1,4.6-5.4,7.4c-1.3,2.8-2,5.9-2.1,9 
 
\t \t \t \t c-0.2,6.2,2.3,12.6,6.9,17c0.3,0.3,0.6,0.5,0.9,0.8c4.2,4.1,9.9,6.7,16.2,6.7h51.1c17.3,0.2,34.6,0.3,51.8,0.2l17.1-0.1 
 
\t \t \t \t c3.1,0,6.2-0.1,9.3-0.1H232c12.7,0,23-10.3,23-23C255,22.1,254.1,18.7,252.7,15.6z M5,25.6c0-10.5,8.5-19,19-19h208 
 
\t \t \t \t c5.1,0,9.7,2,13.1,5.3c2.9,3.4,4.5,7.8,4.5,12.2c0,5.1-2.2,10-6,13.4c-1.8,1.7-4,3-6.4,3.9c-0.3,0.1-0.6,0.2-0.9,0.3l-0.9,0.2 
 
\t \t \t \t c-0.6,0.2-1.2,0.3-1.8,0.3c-0.6,0.1-1.2,0.1-1.9,0.2c-0.3,0-0.6,0-1,0l-1.1,0l-34.2-0.3l-20.9-0.1l-4.8-0.1l-8.6-0.2 
 
\t \t \t \t c-5.7-0.1-11.4-0.2-17.1-0.2l-17.1-0.1c-22.8-0.1-45.7,0.1-68.5,0.4C47,42,35.6,42.1,24.2,42.3l-1.1,0c-0.4,0-0.6,0-1,0 
 
\t \t \t \t c-0.6,0-1.2,0-1.9-0.1c-0.6-0.1-1.2-0.1-1.8-0.3l-0.9-0.2c-0.3-0.1-0.6-0.2-0.9-0.3c-2.4-0.8-4.6-2-6.5-3.7 
 
\t \t \t \t c-1.4-1.2-2.5-2.6-3.5-4.1C5.6,31.1,5,28.5,5,25.6z" /> 
 

 
\t </symbol> 
 
\t 
 
\t <symbol id="button-large-fill" viewBox="0 0 255 48.9"> 
 
\t \t <path class="st0" d="M0.9,23.6c0-11.6,9.4-21,21-21h208c11.6,0,21,9.4,21,21c0,11.6-9.4,21-21,21h-208C10.3,44.6,0.9,35.2,0.9,23.6z 
 
\t \t \t \t  \t "/> 
 
\t </symbol> 
 

 
</svg>

источник

2017-02-17 14:27:42 Pugazh

Ваш обходной путь оставляет вспышку белого от нейтральной кнопки сверху. Конечно, это может быть исправлено. Скрытие и отображение другого контура при наведении можно сделать на той же кнопке, что не требует дополнительной обертки. Но я не ищу обходного пути; Меня интересует, почему замена значения фильтра не работает в большинстве современных браузеров. –

Технически в SVG 1.1, фильтр не является CSS-свойство, которое может быть применено к SVG подэлемента так что этот стиль не должен работа на всех - неважно, на ходу. Различные браузеры постепенно внедряют поведение SVG 2, которое расширяет стилистику CSS.

Временное решение - применяйте классы стилей к обертке div вокруг SVG, затем фильтры переключаются очень хорошо при наведении. Смотрите ниже:

#shapes { 
 
    filter: url(#firstfilter); 
 
} 
 

 
#shapes:hover { 
 
    filter: url(#secondfilter); 
 
}

<div id="shapes"> 
 
<svg> 
 
    <defs> 
 
    <filter id="firstfilter"> 
 
     <feColorMatrix type="matrix" values=".2 .2 .2 0 0 
 
              0 0 0 0 0 
 
              0 0 0 0 0 
 
              0 0 0 1 0"/> 
 
    </filter> 
 
     
 
    <filter id="secondfilter"> 
 
     <feGaussianBlur stdDeviation="2"/> 
 
    </filter> 
 
     
 
    </defs> 
 
    
 
    <path class="st0" d="M0.9,23.6c0-11.6,9.4-21,21-21h208c11.6,0,21,9.4,21,21c0,11.6-9.4,21-21,21h-208C10.3,44.6,0.9,35.2,0.9,23.6z" fill="blue"/> 
 
    
 
    <path d="M252.7,15.6c-1.3-3.2-3.3-6.1-5.8-8.4c-2.3-2.2-5.1-3.8-8-4.9c-0.4-0.1-0.7-0.3-1.1-0.4l-1.1-0.3c-0.8-0.2-1.5-0.3-2.3-0.4 
 
\t \t \t \t c-0.8-0.1-1.6-0.2-2.4-0.2c-0.8,0-1.5,0-2.2,0l-28.3,0.2c-2-0.1-4-0.2-6-0.2c-5.7-0.2-11.4-0.4-17.1-0.5l-8.6-0.2L161.2,0 
 
\t \t \t \t c-11.4-0.1-22.8,0-34.2,0.2C104.1,0.7,81.3,1.8,58.4,2C47,2.1,35.6,2.1,24.2,2c-0.7,0-1.4,0-2.2,0c-0.8,0-1.5,0-2.3,0.2 
 
\t \t \t \t c-0.8,0.1-1.5,0.2-2.2,0.4l-1.1,0.3c-0.4,0.1-0.7,0.2-1.1,0.4c-2.9,1-5.5,2.5-7.8,4.6c-2.3,2-4.1,4.6-5.4,7.4c-1.3,2.8-2,5.9-2.1,9 
 
\t \t \t \t c-0.2,6.2,2.3,12.6,6.9,17c0.3,0.3,0.6,0.5,0.9,0.8c4.2,4.1,9.9,6.7,16.2,6.7h51.1c17.3,0.2,34.6,0.3,51.8,0.2l17.1-0.1 
 
\t \t \t \t c3.1,0,6.2-0.1,9.3-0.1H232c12.7,0,23-10.3,23-23C255,22.1,254.1,18.7,252.7,15.6z M5,25.6c0-10.5,8.5-19,19-19h208 
 
\t \t \t \t c5.1,0,9.7,2,13.1,5.3c2.9,3.4,4.5,7.8,4.5,12.2c0,5.1-2.2,10-6,13.4c-1.8,1.7-4,3-6.4,3.9c-0.3,0.1-0.6,0.2-0.9,0.3l-0.9,0.2 
 
\t \t \t \t c-0.6,0.2-1.2,0.3-1.8,0.3c-0.6,0.1-1.2,0.1-1.9,0.2c-0.3,0-0.6,0-1,0l-1.1,0l-34.2-0.3l-20.9-0.1l-4.8-0.1l-8.6-0.2 
 
\t \t \t \t c-5.7-0.1-11.4-0.2-17.1-0.2l-17.1-0.1c-22.8-0.1-45.7,0.1-68.5,0.4C47,42,35.6,42.1,24.2,42.3l-1.1,0c-0.4,0-0.6,0-1,0 
 
\t \t \t \t c-0.6,0-1.2,0-1.9-0.1c-0.6-0.1-1.2-0.1-1.8-0.3l-0.9-0.2c-0.3-0.1-0.6-0.2-0.9-0.3c-2.4-0.8-4.6-2-6.5-3.7 
 
\t \t \t \t c-1.4-1.2-2.5-2.6-3.5-4.1C5.6,31.1,5,28.5,5,25.6z" fill="red" /> \t 
 

 
</svg> 
 
     
 
</div>

источник

2017-02-18 02:28:59

Фильтр должен применяться только к одному '' внутри SVG. –

разделяет пути на два отдельных svgs –

Посмотрите на эту workaround on CodePen. Он использует непрозрачность с состоянием зависания. Мне нужно было обрабатывать прозрачность в моих фильтрах, чтобы немного изменить его. Я также перенес стиль на внешний лист css. Мне это нравится лучше, чем делать дополнительные обертки div, поскольку состояние зависания может применяться к многоугольнику, а не к прямоугольнику.

<style> 
    #group { 
     cursor: pointer; 
    } 
    #group #poly-off { 
     opacity: 1; 
    } 
    #group #poly-on { 
     opacity: 0; 
    } 
    #group:hover #poly-off { 
     opacity: 0; 
    } 
    #group:hover #poly-on { 
     opacity: 1; 
    } 
</style> 

<svg> 
    <defs> 
     <filter id="off"> 
     <filter id="on"> 
     <path d="..." id="path"/> 
    </defs> 
    <g id="group"> 
     <use id="poly-off" filter="url(#off)" xlink:href="#path"/> 
     <use id="poly-on" filter="url(#on)" xlink:href="#path"/> 
     <use fill-opacity="0.5" fill="#ff0000" xlink:href="#path"/> 
    </g> 
</svg>

источник

2017-10-12 01:31:00 sansSpoon

Кнопка наведения и замена SVG-фильтра в <use> с CSS

ответ

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