CSS - Как размыть маску SVG?
Я безуспешно пытался размыть путь 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 ответа
Решение
Хорошо, вот способ сделать это с помощью 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>
Использовать <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);
...
}