SVG 모양에 이중 테두리를 추가하는 방법-CSS 튜토리얼-php.cn

간단한 솔루션

개요 및 박스 섀도우

SVG 구배

모든 모양에 대한 솔루션

필터 : drop-shadow ()

SVG 필터

모양을 재사용합니다

옵션 1 : 변환

전체 결과는 다음과 같습니다!

집

웹 프론트엔드

CSS 튜토리얼

SVG 모양에 이중 테두리를 추가하는 방법

Jennifer Aniston

Mar 25, 2025 am 10:48 AM

SVG 모양에 이중 테두리를 추가하는 방법

누군가가 임의의 기하학적 SVG 모양에 이중 테두리를 추가하도록 요청한다고 가정 해 봅시다. 어떤 이유로 든 런타임에 생성 해야하는 그래픽 편집기를 사용할 수 없으므로 CSS 또는 SVG 구문 내에서 해결해야합니다.

첫 번째 질문은 다음과 같습니다. SVG의 뇌졸중 스타일 : Double과 같은 것이 있습니까? 글쎄, 대답은 아직 아니며 그렇게 쉽지 않습니다. 그러나 어쨌든 내가 어떤 방법을 발견 할 수 있는지 알아볼 것입니다. 원, 사각형 및 다각형의 세 가지 기본 모양의 가능성을 탐구하겠습니다. 두 줄의 중간에 투명한 색상을 유지할 수있는 것들을 가리키십시오.

스포일러 경고 : 모든 결과에는 최소한 CSS 및 SVG와 함께 다운 사이드가 있지만 내 의도를 안내해 드리겠습니다.

간단한 솔루션

이것들은 모든 모양과 함께 작동하지는 않지만 가장 쉬운 솔루션입니다.

개요 및 박스 섀도우

CSS 속성 개요 및 박스-샤도는 모양 또는 SVG의 경계 상자에만 적용되므로 제곱과 사각형을위한 훌륭한 솔루션입니다. 또한 사용자 정의 속성을 사용하여 유연한 색상을 허용합니다.

개요가있는 두 줄의 CSS 만 필요하며 모양을 통해 배경색을 보이게합니다.

? 하나의 모양에 대해서만 해결책.
✅ 간단한 코드
✅ 경계가 매끄 럽습니다
✅ 투명한 배경

Box-Shadow는 한 줄의 CS 만 있으면되지만 상자 쉐이드를 모양에 직접 적용 할 수 없으므로 각 모양에 고유 한 SVG가 있는지 확인 해야합니다. 고려해야 할 또 다른 점은 선언에 배경의 색상을 적용해야한다는 것입니다.

? 하나의 모양에 대해서만 해결책
✅ 간단한 코드
✅ 경계가 매끄 럽습니다
? 투명한 배경이 없습니다

SVG 구배

SVG 방사형 그라디언트는 원에서만 작동합니다. 뇌졸중에 그라디언트를 직접 적용 할 수 있지만 코드에서 색상을 여러 번 선언해야하므로 변수를 사용하는 것이 좋습니다.

? 하나의 모양에 대해서만 해결책
✅ 간단한 코드
? 국경은 매끄 럽습니다
? 투명한 배경이 없습니다

모든 모양에 대한 솔루션

이것들은 모든 모양과 함께 작동하지만 코드는 부풀어 오르거나 복잡해질 수 있습니다.

필터 : drop-shadow ()

마지막으로, 모든 모양에 대한 하나의 솔루션! 필터는 모양에 직접 적용되지 않으므로 각 모양이 자체

✅ 모든 모양에 대한 하나의 솔루션
✅ 간단한 코드
? 테두리는 픽셀 화 된 것 같습니다
? 투명한 배경이 없습니다

SVG 필터

이것은 매우 유연한 솔루션입니다. 필터를 생성하고 SVG의 필터 속성을 통해 모양에 추가 할 수 있습니다. 여기서 복잡한 부분은 필터 자체입니다. 우리는 3 개의 그림이 필요합니다. 하나는 외부 테두리, 하나는 배경 홍수, 마지막으로 전면의 모양을 페인트하는 마지막 그림이 필요합니다. 결과는 Drop-Shadow를 사용하는 것보다 더 좋아 보이지만 경계는 여전히 픽셀 화되어 있습니다.

✅ 모든 모양에 대한 하나의 솔루션
? 복잡한 코드
? 테두리는 픽셀 화 된 것 같습니다
? 투명한 배경이 없습니다

모양을 재사용합니다

여기에는 몇 가지 가능한 옵션이 있습니다.

옵션 1 : 변환

이 솔루션에는 변환이 필요합니다. 우리는 메인 그림에 채우기 색상과 스트로크 색상이 있고 다른 그림에는 채우기가없고 빨간 스트로크가 없으며 중앙에 스케일링되어 재배치됩니다. 우리는 에서 모양을 정의했습니다. 비결은 뷰 박스 의 절반을 음성 공간으로 변환하여 확장 할 때 그림의 중심에서 수행 할 수 있도록하는 것입니다.

✅ 모든 모양에 대한 하나의 솔루션
? 복제 된 코드
✅ 경계가 매끄 럽습니다
✅ 투명한 배경

옵션 2 :

Doug Schepers의 www-SVG 메일 링리스트에서 SVG 를 사용하는 영리한 솔루션을 찾았습니다. 다시 한 번 모양을 한 번 정의하고 를 사용하여 두 번 참조해야합니다. 이번에는 주요 모양이 더 큰 스트로크가 있습니다. 메인 모양의 두 번째 shapehashalfthestroke, 채우기 없음, 그리고 배경색과 일치하는 Anda 스트로크.