SVG фильтр с переменной? - PullRequest
Новая
       18

SVG фильтр с переменной?

3 голосов
/ 18 июня 2019

У меня есть SVG фильтр свечения, реализованный так: 

<filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: #RRGGBB"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>

Это хорошо работает, но только для одного определенного цвета свечения.

Я бы хотел иметь произвольный цвет свечения, в некотором роде передавая переменную свойству flood-color.

Я пытался использовать currentColor, но, кажется, это цвет, такой, какой он есть, когда определяется фильтр, а не когда он применяется.

Я мог бы определить фильтр для каждого цвета (их будет ограниченное количество), но было бы лучше - и, конечно, более эффективно использовать пространство - его нужно было бы определить только один раз. Возможно ли это, и если да, то как?

1 Ответ

0 голосов
/ 18 июня 2019

В следующем примере flood-color является текущим цветом. Если вы щелкнете по элементу svg, вы переключите класс «синий». color элемента svg - red, цвет .blue - синий.

Когда вы переключаете синий класс, фильтр меняет цвет потока. 

test.addEventListener("click",()=>{
  test.classList.toggle("blue")
})
svg {
  border: 1px solid;
  font-size: 40px;
  text-anchor: middle;
  dominant-baseline: middle;
  width:100px;
  color:red;
}

.blue{color:blue;}
<svg id="test"  viewBox="0 0 100 70">
  
  <filter id="outline">
    <feMorphology in="SourceAlpha" operator="dilate" radius="2"></feMorphology>
    <feGaussianBlur stdDeviation="1" result="dilated"></feGaussianBlur>
    <feFlood style="flood-color: currentcolor"></feFlood>
    <feComposite in2="dilated" operator="in"></feComposite>
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
  
<text x="50" y="40" filter="url(#outline)">click</text>
  
</svg>
...