CSS - Как размыть маску SVG?

#css #html5 #svg #анимация #clip_path

Я пытался размыть SVG clip-path.
 Пробовал разные решения, но ни одно не помогло.  

Я не уверен, есть ли другое решение, кроме фильтра.

Pseudocode  


SVG clip-path должен раскрывать текст ниже  
Края, если SVG clip-path применен должны быть размытыми  


HTML



    .wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
    
    .h1, blur {
      width: 100vw;
      height: 100vh;
    }
    
    .h1 {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      font-size: 4em;
      clip-path: url(#svgPath);
      background-color: blue;
    }
    
    .blur {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      font-size: 4em;
      color: blue;
      background-color: white;
      filter: blur(8px)
    }

      

        Our principles inform everything we do. Whether you're preparing content,
designing an interface or developing an entire service, start by reading these.
      
      

        Our principles inform everything we do. Whether you're preparing content,
designing an interface or developing an entire service, start by reading these.
      
    
    
    



    

Ответы

Ответ 1

Хорошо, вот способ сделать это, используя radial-gradient() в качестве mask-image. 



var h1 = document.getElementById('masked');

document.addEventListener('mousemove', mouseListen, false);

function mouseListen(e){ 
  setMaskPos(e.clientX,e.clientY);
}

function setMaskPos(x,y) {
  h1.setAttribute("style", "-webkit-mask-image: radial-gradient(circle at " + x +
"px " + y + "px, black 0px, black 200px, transparent 250px)");
}

// Initialise the mask off screen
setMaskPos(-999,0);
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.h1, blur {
  width: 100vw;
  height: 100vh;
}

.h1 {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  font-size: 4em;
  background-color: white;
}

.blur {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  font-size: 4em;
  background-color: white;
  filter: blur(8px)
}

  

    Our principles inform everything we do. Whether you're preparing content, designing
an interface or developing an entire service, start by reading these.
  
  

    Our principles inform everything we do. Whether you're preparing content, designing
an interface or developing an entire service, start by reading these.