How to add a Blur Filter to SVG Element in CSS [closed]

Question

I'm trying to add a blur effect to an SVG element. I attempted using within the SVG but changing the values of stdDeviation doesn't seem to produce any changes. How can I properly apply a blur filter to my SVG?

I attempted to add a blur effect to an SVG element using and adjusted the values of stdDeviation. However, I didn't see any changes. I expect the result to be similar to what filter: blur(70px); would achieve in CSS.

Answer 1

Take a look at this approach. However, as the colleague above mentioned, it would be good if you could provide the code with the problem.

const addBlur = document.getElementById('blur');
const blurFilter = document.querySelector('#blurFilter feGaussianBlur');

addBlur.addEventListener('input', function() {
  const blurValue = addBlur.value;
  blurFilter.setAttribute('stdDeviation', blurValue);
});

<input id="blur" type="range" min="0" max="100" value="10">
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
  <filter id="blurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
  </filter>
</defs>
<rect x="10" y="10" width="180" height="180" fill="blue" filter="url(#blurFilter)" />
  </svg>