SVG 필터를 사용하여 내부 획 작성

Question

SVG 경로에서 "내부 획"을 시뮬레이트하고 싶습니다. 서로 다른 채우기 색 획을 가진 복잡한 경로 (국가)가 여러 개인 svg 맵이 있습니다. 그리고 첫 번째 문장에 "가짜 내부 획"을 추가하고 싶습니다. 내부 그림자 트릭 (가우시안 블러 필터 사용)으로 몇 가지 작업을 처리 할 수 ​​있었지만 "흐림없는"것으로 관리 할 수는 없었습니다.

이상적인 솔루션은 svg 필터이므로 경로를 변경하거나 dom을 조작하지 않고 동적으로 JS를 통해 적용 할 수 있습니다.

고마워요! 편집 1 : 지금까지 나는이 트릭을 시도했지만 ...

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" style="transform:scale(2);transform-origin:0 0 "> 
 
    <defs> 
 
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'> 
 
    
 
    <feFlood fill-color="black"/> 
 
    <feComposite in2="SourceAlpha" operator="out"/> 
 
    
 
    <feGaussianBlur stdDeviation='10' edgeMode="none" /> 
 
    <feOffset dx='0' dy='0' result='offsetblur'/> 
 
    <feFlood flood-color='#00ff00' result='color'/> 
 
    <feComposite in2='offsetblur' operator='in'/> 
 
    <feComposite in2='SourceAlpha' operator='in' /> 
 
    <feMerge> 
 
     <feMergeNode in='SourceGraphic'/> 
 
     <feMergeNode/> 
 
    </feMerge> 
 
    </filter> 
 
     
 
\t </defs> 
 
    
 
<path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1 
 
\t l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7 
 
\t l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1 
 
\t l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z" stroke-width="1" fill="#00ffff" stroke="#FF0000" filter="url(#inset)"/> 
 
</svg>

Answer 1

당신이 명확한 모양을 원하는 경우에, 당신은 SVG 변환을 사용해야합니다 svg 요소에 CSS 변환을 적용하는 대신

"내부 획"을 그리면 feMorphorogy 요소가 유용합니다. 이렇게하면 대상 모양의 페인트 영역이 줄어들거나 늘어나므로 "가짜 내부/외부"획을 그릴 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" 
 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300"> 
 
    <defs> 
 
    <filter id='inset' x='-50%' y='-50%' width='200%' height='200%'> 
 
     <!--outside-stroke--> 
 
     <feFlood flood-color="red" result="outside-color"/> 
 
     <feMorphology in="SourceAlpha" operator="dilate" radius="2"/> 
 
     <feComposite in="outside-color" operator="in" result="outside-stroke"/> 
 
     <!--inside-stroke--> 
 
     <feFlood flood-color="blue" result="inside-color"/> 
 
     <feComposite in2="SourceAlpha" operator="in" result="inside-stroke"/> 
 
     <!--fill-area--> 
 
     <feMorphology in="SourceAlpha" operator="erode" radius="2"/> 
 
     <feComposite in="SourceGraphic" operator="in" result="fill-area"/> 
 
     <!--merge graphics--> 
 
     <feMerge> 
 
     <feMergeNode in="outside-stroke"/> 
 
     <feMergeNode in="inside-stroke"/> 
 
     <feMergeNode in="fill-area"/> 
 
     </feMerge> 
 
    </filter> 
 
    </defs> 
 
    <g transform="scale(2)"> 
 
    <path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1 
 
    l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7 
 
    l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1 
 
    l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z" 
 
fill="#00ffff" filter="url(#inset)"/> 
 
    </g> 
 
</svg>

Answer 2

가짜 그림자 스트로크를 통해 때로는 항상 흐릿 그래서 내가 그 심지어 가장 좋은 방법 확실하지 않다 이것은 당신이 원하는 것을합니다. 스트로크가 채우기 색상과 다른 단일 색상 인 경우 (이 경우 100 % 빨간색 - 원하는 색상으로 획 색상을 변경할 수 있지만 필터가 더 복잡해집니다)에 따라 달라집니다.

마지막 feColorMatrix의 마지막 열의 값을 변경하여 "가짜"내부 획의 색상을 조정할 수 있습니다. 지금은 100 % 파란색입니다. (- 데프의 대답에로 - 당신은이를 만들 feMorphology를 사용할 수 있지만이 방법은 원래의 마이 터링을 보존하지 않습니다.)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="150" height="150" style="transform:scale(2);transform-origin:0 0 "> 
 
    <defs> 
 
    <filter id='fake-stroke' x='-50%' y='-50%' width='200%' height='200%' color-interpolation-filters="sRGB"> 
 
    
 
    <!-- select just the red outline and zero out the opacity of everything that's not 100% red. --> 
 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
 
             0 0 0 0 0 
 
             0 0 0 0 0 
 
             255 -255 -255 -254 0" result="outline-only"/> 
 
    <feGaussianBlur stdDeviation="1"/> 
 

 
    <!-- select just the blur - not the original stroke. --> 
 
    <feComposite operator="out" in2="outline-only"/> 
 

 
    <!-- select just the blur that overlaps the original content --> 
 
    <feComposite operator="in" in2="SourceGraphic" /> 
 

 
    <!-- increase its opacity to 100% except the most blurred - to fake anti-aliasing --> 
 
    <feComponentTransfer> 
 
     <feFuncA type="table" tableValues="0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1"/> 
 
    </feComponentTransfer> 
 

 
    <!-- change the color of the fake stroke to the desired value --> 
 
    <feColorMatrix type="matrix" values ="0 0 0 0 0 
 
              0 0 0 0 0 
 
              0 0 0 0 1 
 
              0 0 0 1 0"/> 
 
    <!-- put it on top of the original --> 
 
    <feComposite operator="over" in2="SourceGraphic"/> 
 

 
    </filter> 
 
     
 
\t </defs> 
 
    
 
<path class="st0" d="M144.7,126.2l-2.8,8.8l-3.9-2.3l-2-7.7l1.7-4.3l5.5-4.4L144.7,126.2z M93.5,24.2l6,6.3l4.4-1l7.5,6l1.9,1.1 
 
\t l2.5-0.3l4,3.4l12.3,2.4l-4.3,8.9l-1.1,9.1l-2.4,2.2l-3.9-1.2l0.3,3.2l-6.3,7l-0.1,5.6l4.1-1.9l2.9,5.4L121,84l2.5,4.6l-3,3.7 
 
\t l2.2,9.3l4.6,1.5l-1,5.1l-7.8,6.6l-16.9-3.2l-12.5,3.8l-1,7l-9.9,1.5l-9.6-5.3l-3.1,2.5l-15.8-5.3l-3.4-4.6l4.4-7.1l1.6-24.1 
 
\t l-8.8-13l-6.3-6.4l-13.1-4.9l-0.9-9.4l11.1-2.8L48.9,47l-2.7-14.8l8.1,5.7l20-10.3l2.6-11l7.5-2.8l1.3,4.8l4,0.2L93.5,24.2z" stroke-width="2" fill="#00ffff" stroke="#FF0000" filter="url(#fake-stroke)"/> 
 
</svg>