CSS - Как размыть маску SVG? - PullRequest
Новая
       29

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

0 голосов
/ 11 декабря 2018

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

Псевдокод

  • Путь клипа SVG должен показать текст ниже
  • Края, еслиSVG должен быть размытым

Заранее спасибо.

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)
    }
<div class="wrapper">
      <h1 class="blur">
        Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
      </h1>
      <h1 class="h1">
        Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
      </h1>
    </div>
    
    <svg id="googlesMain" height="0" width="0">
      <defs>
        <filter id="f1" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
        </filter>
      </defs>
        <clipPath id="svgPath">
           <circle id="clipPath" cx="250" cy="250" r="250"/>
        </clipPath>
    </svg>

Ответы [ 2 ]

0 голосов
/ 11 декабря 2018

Хорошо, вот способ сделать это, используя 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)
}
<div class="wrapper">
  <h1 class="blur">
    Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
  </h1>
  <h1 id="masked" class="h1">
    Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
  </h1>
</div>
0 голосов
/ 11 декабря 2018

Используйте <mask> вместо <clipPath>.Пути клипа не могут быть размыты, но элементы в <mask> могут.

Следующее будет работать в Firefox, но не работает в других браузерах: 

.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;
  -webkit-mask: url(#svgPath);
  mask: 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)
}
<div class="wrapper">
  <h1 class="blur">
    Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
  </h1>
  <h1 class="h1">
    Our principles inform everything we do. Whether you're preparing content, designing an interface or developing an entire service, start by reading these.
  </h1>
</div>
    
<svg id="googlesMain" height="0" width="0">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
    <mask id="svgPath">
      <circle id="clipPath" cx="250" cy="250" r="250" fill="white" filter="url(#f1)"/>
    </mask>
  </defs>
</svg>

Чтобы заставить его работать в других браузерах, попробуйте превратить его в автономный SVG.Затем используйте вместо этого mask-image правило CSS. 

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <circle cx="250" cy="250" r="250" fill="white" filter="url(#f1)" />
</svg>

с CSS: 

.h1 {
  ...
  -webkit-mask-image: url(mask.svg);
  mask-image: url(mask.svg);
  ...
}
...