누군가가 임의의 기하학적 SVG 모양에 이중 테두리를 추가하도록 요청한다고 가정 해 봅시다. 어떤 이유로 든 런타임에 생성 해야하는 그래픽 편집기를 사용할 수 없으므로 CSS 또는 SVG 구문 내에서 해결해야합니다.
첫 번째 질문은 다음과 같습니다. SVG의 뇌졸중 스타일 : Double과 같은 것이 있습니까?
글쎄, 대답은 아직 아니며 그렇게 쉽지 않습니다. 그러나 어쨌든 내가 어떤 방법을 발견 할 수 있는지 알아볼 것입니다. 원, 사각형 및 다각형의 세 가지 기본 모양의 가능성을 탐구하겠습니다. 두 줄의 중간에 투명한 색상을 유지할 수있는 것들을 가리키십시오.
스포일러 경고 : 모든 결과에는 최소한 CSS 및 SVG와 함께 다운 사이드가 있지만 내 의도를 안내해 드리겠습니다.
이것들은 모든 모양과 함께 작동하지는 않지만 가장 쉬운 솔루션입니다.
CSS 속성 개요 및 박스-샤도는 모양 또는 SVG의 경계 상자에만 적용되므로 제곱과 사각형을위한 훌륭한 솔루션입니다. 또한 사용자 정의 속성을 사용하여 유연한 색상을 허용합니다.
개요가있는 두 줄의 CSS 만 필요하며 모양을 통해 배경색을 보이게합니다.
Box-Shadow는 한 줄의 CS 만 있으면되지만 상자 쉐이드를 모양에 직접 적용 할 수 없으므로 각 모양에 고유 한 SVG가 있는지 확인 해야합니다. 고려해야 할 또 다른 점은 선언에 배경의 색상을 적용해야한다는 것입니다.
SVG 방사형 그라디언트는 원에서만 작동합니다. 뇌졸중에 그라디언트를 직접 적용 할 수 있지만 코드에서 색상을 여러 번 선언해야하므로 변수를 사용하는 것이 좋습니다.
이것들은 모든 모양과 함께 작동하지만 코드는 부풀어 오르거나 복잡해질 수 있습니다.
마지막으로, 모든 모양에 대한 하나의 솔루션! 필터는 모양에 직접 적용되지 않으므로 각 모양이 자체
이것은 매우 유연한 솔루션입니다. 필터를 생성하고 SVG의 필터 속성을 통해 모양에 추가 할 수 있습니다. 여기서 복잡한 부분은 필터 자체입니다. 우리는 3 개의 그림이 필요합니다. 하나는 외부 테두리, 하나는 배경 홍수, 마지막으로 전면의 모양을 페인트하는 마지막 그림이 필요합니다. 결과는 Drop-Shadow를 사용하는 것보다 더 좋아 보이지만 경계는 여전히 픽셀 화되어 있습니다.
여기에는 몇 가지 가능한 옵션이 있습니다.
이 솔루션에는 변환이 필요합니다. 우리는 메인 그림에 채우기 색상과 스트로크 색상이 있고 다른 그림에는 채우기가없고 빨간 스트로크가 없으며 중앙에 스케일링되어 재배치됩니다. 우리는
Doug Schepers의 www-SVG 메일 링리스트에서 SVG
당신은 그들 모두를 한 곳에두고 있습니다. 다른 가능한 솔루션을 생각할 수 있다는 것을 알려주세요!
위 내용은 SVG 모양에 이중 테두리를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
