我正在尝试为以下 SVG 形状制作投影:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4"/>
</svg>
阴影之后的形状应该是这样的(忽略除了箭头和它的阴影之外的位):
我尝试了以下 SVG:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
<filter id="f1" x="0" y="0" width="500%" height="500%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>
http://fiddle.jshell.net/md3rT/
我得到的是这样的:
生成的 SVG 被截断了。 另外,如何更改阴影的不透明度?
提前致谢!
最佳答案
要停止截断,只需让滤镜覆盖形状(阴影位于上方和左侧,因此滤镜需要覆盖该区域)。
<filter id="f1" x="-180%" y="-500%" width="500%" height="1000%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
如果您希望阴影不透明,涉及非不透明泛光的东西似乎可以解决问题。对于一般的投影,你需要这样的东西......
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/>
<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/>
<feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="in-of-feDropShadow"/>
</feMerge>
不过,在 Firefox 和 Chrome 中,您可以使用 SVG Filter Effects <feDropShadow>
过滤器或 CSS 投影过滤器。
关于html - 带有过滤器的 SVG 投影被截断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23387820/