如何解决为 webpack 导入 svg 过滤器
@use 'sass:math';
@import '../Theme.scss';
$borderW: 5px;
$borderR: 5px;
$numOfBlobs: 4;
.blob-btn {
z-index: 1;
position: relative;
padding: 20px 46px;
margin-bottom: 30px;
text-align: center;
text-transform: uppercase;
font-size: 16px;
font-weight: bold;
background-color: transparent;
outline: none;
border: none;
transition: color 0.5s;
cursor: pointer;
border-radius: $borderR;
color: $primary;
&:before {
content: '';
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border: $borderW solid $primary;
border-radius: $borderR;
}
&:after {
content: '';
z-index: -2;
position: absolute;
left: $borderW * 1.5;
top: $borderW * 1.5;
width: 100%;
height: 100%;
transition: all 0.3s 0.2s;
border-radius: $borderR;
}
&:hover {
color: #ffffff;
border-radius: $borderR;
&:after {
transition: all 0.3s;
left: 0;
top: 0;
border-radius: $borderR;
}
}
&__inner {
z-index: -1;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: $borderR;
background: #ffffff;
}
// additional container created,because in FF blobs are breaking overflow:hidden of element with svg gooey filter
&__blobs {
position: relative;
display: block;
height: 100%;
filter: url('#goo');
}
&__blob {
position: absolute;
top: $borderW;
width: math.div(100%,$numOfBlobs);
height: 100%;
background: $primary;
border-radius: 100%;
transform: translate3d(0,150%,0) scale(1.7);
transition: transform 0.45s;
@supports (filter: url('#goo')) {
transform: translate3d(0,0) scale(1.4);
}
@for $i from 1 through $numOfBlobs {
&:nth-child(#{$i}) {
left: ($i - 1) * math.div(120%,$numOfBlobs);
transition-delay: ($i - 1) * 0.08s;
}
}
.blob-btn:hover & {
transform: translateZ(0) scale(1.7);
@supports (filter: url('#goo')) {
transform: translateZ(0) scale(1.4);
}
}
}
}
.blob-btn-secondary {
@extend .blob-btn;
color: $secondary;
&:before {
border: $borderW solid $secondary;
}
}
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
style={{ display: 'none' }}
>
<defs>
<filter id="goo">
<feGaussianBlur
in="SourceGraphic"
result="blur"
stdDeviation="10"
></feGaussianBlur>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7"
result="goo"
></feColorMatrix>
<feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
</filter>
</defs>
</svg>
<button
class='blob-btn'}
style={{
padding: '15px',margin: '15px',width: '100%',zIndex: 10,filter: isHovered ? 'blur(2px)' : 'none',// color: color,}}
>
Coming Soon
<span className="blob-btn__inner">
<span className="blob-btn__blobs" style={{ filter: `url(#goo)` }}>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
<span
className="blob-btn__blob"
style={{ background: color }}
></span>
</span>
</span>
</button>
它在与 snopack 一起运行时运行良好,但是一旦我尝试捆绑它,它就会失去与 goo svg 的连接。尝试使用 webpack,以及我得到的原生雪包打包器:
[16:56:29] [sNowpack] 构建失败,出现 1 个错误: build/dist/components/PositionAwareButton.css:10837:14: 错误: 可以 不解析“/dist/components/#goo”
非常感谢任何关于我需要开始寻找的地方
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。