如何向SVG路径元素添加投影

Question

我一直在尝试应用投影到我的SVG路径。我在谷歌上搜索了filter选项，当它被应用到path时，通过应用:-webkit-filter: drop-shadow( -5px -5px 10px #000 );，它似乎没有被应用。

下面是我的SVG路径演示的问题

Answer 1

在JSFiddle中，我删除了CSS并添加了一个过滤器定义。它似乎工作:

<svg width="100%" height="300px">
<defs>
       <filter id="filter1" x="0" y="0">
           <feOffset result="offOut" in="SourceAlpha" dx="-5" dy="-5" />
           <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
           <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
</defs>
<path stroke-linejoin="round" stroke-linecap="round" stroke="red" stroke-opacity="1" stroke-width="5" fill="none" class="leaflet-clickable" d="M1063 458L1055 428L1034 433L1030 421L1017 423L911 452L895 455L885 441L859 424L809 410L788 394L774 377L744 309L730 313L727 304L669 319L599 341L596 331L491 364L488 357L498 343L490 343L450 352L417 256L371 270L366 253L355 256L351 242L217 282L194 210L191 196L166 113L45 147L44 140L13 150" filter="url(#filter1)"></path>
</svg>

也许对dx, dy和stdDeviation值进行一些调整将得到你想要的方式。