来源如下:
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path fill="#E0E0E0" stroke="#FFFFFF" stroke-width="5" d="M 50 50 l 100 0 l -50 86.6 z" filter="url(#f1)"/>
</g>
</svg>
这是 Firefox 渲染的样子: Chrome 也类似。
为什么投影不对称?我希望使它看起来好像照明来自图像的正上方,因此阴影应该是对称的。它最终应该看起来像下面的光栅图像:
(很抱歉,内部颜色不匹配,但我稍后会修复。)
最佳答案
这更像你想要的吗?
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<defs>
<filter id="f1" x="-1" y="-1" width="300%" height="300%">
<feOffset result="offOut" in="SourceGraphic" dx="0" dy="10" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<path fill="#E0E0E0" stroke="#FFFFFF" stroke-width="5" d="M 50 50 l 100 0 l -50 86.6 z" filter="url(#f1)"/>
</g>
</svg>
编辑:说明:
我使滤镜效果区域更大(在 width
上使用 height
/<filter>
),使其大于形状的边界框(其宽度的 300%)。当然,必须重新定位它(使用 x
/y
),以便形状位于效果区域的中心。我还使用y
将阴影稍微向下移动了一点。属性 feOffset
.
旁注:正如 Erik Dahlström 在评论中提到的,使用 3
而不是300%
对于 width
和height
在这种情况下是等效的,因为 filterUnits
隐式设置为objectBoundingBox
。 -1
也是如此。和-100%
上x
和y
。我混合了两种符号。
关于svg - 奇怪形状的 SVG 投影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13523557/