形状奇特的 SVG 投影

Question

来源：

<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 类似。

为什么投影是不对称的？我希望让它看起来好像照明来自图像的正上方，所以阴影应该是对称的。它最终应该看起来像下面的光栅图像：

（很抱歉内饰的颜色不匹配，但我稍后会修复。）

Answer 1

这更像你想要的吗？

<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>

编辑：解释：

我使滤镜效果区域更大（在<filter> 上使用width/height），使其大于形状的边界框（其宽度的300%）。当然，它必须重新定位（使用x/y），以使形状位于效果区域的中心。我还使用feOffset 上的y 属性将阴影向下移动了一点。

旁注：正如 Erik Dahlström 在 cmets 中提到的，使用 3 而不是 300% 来表示 width 和 height 在这种情况下是等效的，因为 filterUnits 被隐式设置为 objectBoundingBox。对于x 和y 上的-1 和-100% 也是如此。我混合了两种符号。