SVG에서 삽입 그림자를 만드는 방법

Question

CSS3에 인라인 상자 그림자가 있는 것처럼 인라인 그림자가 있는 상자를 만들어야 합니다. 지금까지 내가 찾은 것은 feGaussianBlur를 사용한 필터이지만 문제는 상자 외부에 그림자도 추가한다는 것인데, 이는 내가 원하지 않습니다. 이것은 내가 지금까지 얻은 코드입니다:

으아아아

데모를 만들어서 이 코드를 원하는 CSS 제작 결과와 비교했습니다. 이 필터는 직사각형뿐만 아니라 사다리꼴 및 더 복잡한 다각형에서도 작동합니다.

RadialGradient를 사용해 봤는데 그것도 그라디언트를 원형으로 만들어서 좋지 않네요.

Answer 1

주로 내가 찾은 실험을 바탕으로 다음과 같은 결론을 내렸습니다.

으아아아

패딩을 보려면 마지막 항목의 주석 처리를 취소하세요. 。不幸的是，fill="transparent" 필터에 사용 가능한 알파가 제공되지 않으며 그림자도 생성되지 않습니다.

Answer 2

단단한 패딩이 있으면 추가하셔도 됩니다

으아악

필터 끝에서 SourceGraphic의 모양에 맞춰 블러를 클리핑합니다. 모양이 투명하기 때문에 더 많은 작업이 필요합니다. 올바른 구성 선택을 얻을 수 있도록 원본 모양에 반투명 채우기를 사용하고 최종 작업을 위해 feFuncA를 사용하여 채우기를 0으로 만드는 것이 좋습니다. 이것은 매우 복잡한 것으로 밝혀졌습니다. 하지만 여기에 모든 실선 모양에 적합한 솔루션이 있습니다

으아악

이것은 내 바이올린 브랜치입니다: http://jsfiddle.net/kkPM4/