html – 带过滤器的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="M 我正在尝试为以下SVG形状制作投影：

<svg ><defs>    <marker orIEnt="auto" refY="4" refX="2" markerHeight="13" markerWIDth="13" ID="_x0000_s1094end">        <path  d="M2,2 L2,6 L6,4 L2,2" />    </marker></defs><path d="M 288,164 L 108,176"  y="4" x="4"/></svg>

在阴影之后,形状被假定为这样(忽略除箭头及其阴影之外的位)：

我尝试了以下SVG：

<svg ><defs>    <marker orIEnt="auto" refY="4" refX="2" markerHeight="13" markerWIDth="13" ID="_x0000_s1094end">        <path  d="M2,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,176"  y="4" x="4" filter="url(#f1)"/></svg>

http://fiddle.jshell.net/md3rT/

我得到的是这个：

生成的SVG将被截断.
另外,如何更改阴影的不透明度？

Thanx提前！

解决方法 要停止截断,只需使过滤器覆盖形状(阴影位于上方和左侧,因此过滤器需要覆盖该区域).

<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投影被截断全部内容，希望文章能够帮你解决html – 带过滤器的SVG投影被截断所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。