CSS3+SVG 필터를 사용하여 불규칙한 테두리를 구현하는 방법에 대한 자세한 설명
- 青灯夜游앞으로
- 2021-04-02 10:20:013162검색
이 기사에서는 SVG 필터를 사용하여 다양한 불규칙 그래픽에 테두리를 추가하는 약간의 요령을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
배경을 요구하고 불규칙한 그래픽에 테두리를 추가합니다
일상적인 개발 과정에서 직사각형이 아니고 원형이 아닌 패턴을 접하게 됩니다. 다음과 유사합니다.
순수한 CSS와 일부 기술을 사용하면 위의 그래픽을 만들 수 있습니다. 물론 이는 요구 사항의 첫 번째 단계일 뿐입니다.
직후에는 위 그래픽에 테두리를 추가해 달라는 요청이 있을 수 있습니다. 이때는 CSS를 사용하기 어려울 것입니다.
테두리를 추가하려면 드롭 섀도우를 사용해 보세요. drop-shadow 添加边框
第一种方法，我们可以尝试使用 drop-shadow，给不规则的图形，添加一个外阴影。
我们以一个箭头图形为例使用 CSS 简单实现它的其中一种方式如下：
<div class="arrow-button"></div>
.arrow-button {
position: relative;
width: 180px;
height: 64px;
background: #f49714;
&::after {
content: "";
position: absolute;
width: 32px;
height: 64px;
top: 0;
right: -32px;
background:
linear-gradient(-45deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%),
linear-gradient(-135deg, transparent 0, transparent 22px, #f49714 22px, #f49714 100%);
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 0 bottom, 0 top;
}
}
我们通过给 .arrow-button 添加一个 drop-shadow，可以实现给不规则图形添加一个阴影，效果如下：
.arrow-button {
...
filter: drop-shadow(0px 0px 2px #000);
...
}
drop-shadow 方案的局限性
使用 drop-shadow 方案的局限性在于，drop-shadow 只能对不规则图形生成阴影，无法生成不带模糊的边框效果。
上述图形添加 drop-shadow 的效果如下，与我们想要的实体不带模糊的边框还是差了一点：
使用 SVG feMorphology 滤镜添加边框
我们还可以换个思路，复制一个原图形，再将其稍微放大一点点改变为边框的颜色，然后两个图形叠加在一起，就能够生成一个带边框的不规则图形了。
CSS 中也有能够放大元素的能力 transform: scale()，但是本身实现一个原图形的代码可能已经非常复杂了，再叠加一个可能会显得不太优雅，我们得另辟蹊径，寻找其他类似的实现方案。
这里，我们尝试使用 SVG的 feMorphology 滤镜来实现给不规则图形添加边框。
简单介绍下 feMorphology 滤镜
feMorphology 滤镜
feMorphology 为形态滤镜，它的输入源通常是图形的 alpha 通道，用来它的两个操作可以使源图形腐蚀（变薄）或扩张（加粗）。
使用属性 operator 确定是要腐蚀效果还是扩张效果。使用属性 radius 表示效果的程度，可以理解为笔触的大小。
- operator：
erode腐蚀模式，dilate为扩张模式，默认为erode - radius：笔触的大小，接受一个数字，表示该模式下的效果程度，默认为 0
我们将这个滤镜简单的应用到文字上看看效果：
<div> <p>Normal Text</p> <p>Normal Text</p> <p>Normal Text</p> </div> <svg> <filter> <femorphology></femorphology> </filter> <filter> <femorphology></femorphology> </filter> </svg>
p {
font-size: 64px;
}
.dilate {
filter: url(#dilate);
}
.erode {
filter: url(#erode);
}
效果如下：最左边的是正常文字，中间的是扩张的模式，右边的是腐蚀模式，看看效果，非常好理解：
借用 feMorphology 的扩张能力给不规则图形添加边框
利用 feMorphology 的扩张能力，我们可以提前准备好一个 SVG feMorphology 滤镜，其作用就是上述所说的：
复制一个原图形，再将其稍微放大一点点改变为边框的颜色，然后两个图形叠加在一起，就能够生成一个带边框的不规则图形了。
并且 SVG 滤镜可以非常简单的通过 CSS Filter 的 url 模式引入到各个不同的图形当中去，复用性非常的高。
该滤镜的简单代码如下：
<svg> <filter> <femorphology></femorphology> <femerge> <femergenode></femergenode> <femergenode></femergenode> </femerge> </filter> </svg>
简单浅析一下这段 SVG 滤镜代码：
<femorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></femorphology>将原图的不透明部分作为输入，采用了dilate扩张模式且程度为radius="1"，生成了一个比原图大 1px 的黑色图块-
使用
🎜🎜첫 번째 방법은feMerge드롭 섀도우를 사용해 불규칙한 그래픽 섀도우에 윤곽선을 추가해 볼 수 있습니다. . 🎜🎜🎜화살표 그래픽을 예로 들어 CSS를 이용해 간단하게 구현하는 방법 중 하나는 다음과 같습니다. 🎜.arrow-button { ... filter: url(#outline); ... }<svg> <filter> <femorphology></femorphology> <feflood></feflood> <fecomposite></fecomposite> <femerge> <femergenode></femergenode> <femergenode></femergenode> </femerge> </filter> </svg>
🎜🎜🎜
에 <code>드롭 섀도우를 추가할 수 있습니다. 화살표 버튼 불규칙한 그래픽에 그림자를 추가하는 경우 효과는 다음과 같습니다. 🎜rrreee🎜
🎜🎜
🎜사용의 한계 drop-shadow 문제는drop-shadow솔루션의 한계🎜drop-shadow가 불규칙한 그래픽에 대해서만 그림자를 생성할 수 있지만 흐림 없이 테두리 효과를 생성할 수 없다는 것입니다. 🎜🎜위 그래픽에 <code>드롭 섀도우를 추가한 효과는 다음과 같습니다. 경계가 흐려지지 않으면 여전히 우리가 원하는 엔터티에 조금 부족합니다. 🎜🎜
🎜🎜🎜SVG feMorphology사용 > 필터를 넣어 테두리 추가🎜 🎜🎜🎜아이디어를 바꿔 원본 그래픽을 복사한 뒤 살짝 확대해 테두리 색상으로 변경한 뒤 두 그래픽을 겹쳐서 불규칙한 그래픽을 생성할 수도 있습니다. 국경. 🎜🎜🎜CSS에는transform: scale()요소를 확대하는 기능도 있지만 원본 그래픽을 구현하는 코드 자체가 매우 복잡할 수 있고 다른 그래픽을 겹쳐놓으면 우아해 보이지 않을 수도 있습니다. 다른 유사한 구현을 찾아보세요. 🎜🎜여기서 SVG의feMorphology필터를 사용하여 불규칙한 그래픽에 테두리를 추가해 보겠습니다. 🎜🎜feMorphology필터에 대한 간략한 소개🎜🎜feMorphology 필터🎜
🎜feMorphology는 일반적으로 그래픽의 알파 채널을 입력 소스로 사용합니다. 두 가지 작업으로 인해 소스 그래픽이 침식(얇아짐)되거나 확장(두꺼워짐)될 수 있습니다. 🎜🎜부식 효과를 원하는지 확장 효과를 원하는지 결정하려면operator속성을 사용하세요. 효과의 정도를 나타내려면radius속성을 사용하세요. 이는 획의 크기로 이해될 수 있습니다. 🎜- 연산자:
erode부식 모드,dilate는 확장 모드, 기본값은erode - radius : 획의 크기. 이 모드의 효과 정도를 나타내는 숫자를 허용하며 기본값은 0입니다.
🎜사용 불규칙한 그래픽에 테두리를 추가하는
🎜feMorphology의 확장 기능🎜feMorphology의 확장 기능을 사용하면 SVGfeMorphology)를 준비할 수 있습니다. > 미리 필터링하는 기능은 위에서 언급한 바와 같습니다. 🎜🎜🎜원본 그래픽을 복사한 다음 약간 확대하여 테두리 색상으로 변경한 다음 두 그래픽을 겹쳐서 테두리가 있는 불규칙한 그래픽을 생성합니다🎜 . 🎜🎜그리고 SVG 필터는 CSS 필터의 URL 모드를 통해 다양한 그래픽에 쉽게 도입될 수 있으며 재사용성이 매우 높습니다. 🎜🎜이 필터의 간단한 코드는 다음과 같습니다. 🎜rrreee🎜이 SVG 필터 코드에 대한 간략한 분석: 🎜- 🎜
<femorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="1"></femorphology>는 원본 이미지의 불투명한 부분을 입력으로 사용하고dilate를 사용합니다. > 확장 모드이며 각도는radius="1"이며 원본 이미지보다 1px 더 큰 검은색 타일을 생성합니다🎜 - 🎜
feMerge를 사용하여 검정으로 변환 타일과 원본 이미지가 함께 겹쳐집니다🎜
我们还是给上述的
.arrow-button添加一个 CSS filterfilter: url(#outline)，引入我们创建的 SVG 滤镜：.arrow-button { ... filter: url(#outline); ... }url 是 CSS 滤镜属性的关键字之一，url 模式是 CSS 滤镜提供的能力之一，允许我们引入特定的 SVG 过滤器，这极大的增强 CSS 中滤镜的能力。【推荐教程：CSS视频教程】
看看效果：
Wow，这下成功了，通过
feMorphology滤镜，我们成功的实现了给不规则的图形添加了边框效果，我能可以通过控制滤镜中的radius="1"来控制边框的大小。再将上述滤镜运用在各种不规则图形下看看效果：
效果还算可以，就是颜色是黑色的。如果我们希望边框的颜色是其他颜色，有没有办法呢？
辅以
feFlood和feComposite改变边框颜色通过
feFlood和feComposite两个 SVG 滤镜，可以给生成的图块上不同的颜色，代码如下：<svg> <filter> <femorphology></femorphology> <feflood></feflood> <fecomposite></fecomposite> <femerge> <femergenode></femergenode> <femergenode></femergenode> </femerge> </filter> </svg>
通过
feFlood中的flood-color="green"，即可控制生成的边框（图块）的颜色，这里设置为了绿色。应用到各个图形上的效果如下：至此，我们实现了通过 SVG 滤镜实现对不规则图形添加不同颜色的边框。
完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框
总结一下
简单的总结一下：
- 使用
drop-shadow可以实现给不规则图形添加阴影，但是无法实现给不规则图形添加实体不带模糊的边框 - 使用
feMorphologySVG 滤镜可以实现给给不规则图形添加边框效果，通过控制radius="1"可以调节边框的大小 - 使用
feMorphology辅以feFlood和feComposite滤镜改变边框颜色 - 通过 CSS Filter 的 url 模式，可以快速的将 SVG 滤镜引入 HTML 元素，例如
filter: url(#outline)
值得注意的是，由于图形高宽不是 1:1 的，并且
feMorphology的dilate模式也不会根据元素的高宽等比例的扩张，所以生成的边框是不一定在各处的均匀相等的，而feMorphology的radius属性可以传入两个值，使用空格分离，分别表示横向与纵向的扩张大小，实际使用的时候可以微调一下。最后
本文更多的是提供一种不规则边框的生成方案思路，当然，具体遇到这种情况大部分还是会以切图为主，不过多了解掌握一种可行方法也不是坏事。
好了，本文到此结束，一个简单的小技巧，希望对你有帮助 :)
更多编程相关知识，请访问：编程视频！！
- 연산자:
위 내용은 CSS3+SVG 필터를 사용하여 불규칙한 테두리를 구현하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!