2

ソースは次のとおりです。

<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も同様です。

ドロップシャドウが非対称なのはなぜですか？イルミネーションが画像の真上からのものであるかのように見せたかったので、影は対称になっているはずです。最終的には、次のラスターイメージのようになります。

（内装の色が合わないのが残念ですが、後で直します。）

4

1 に答える 1

3

これはあなたが望むものにもっと似ていますか？

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

編集：説明：

図形の境界ボックス（幅の300％）よりも大きくなるように、フィルター効果領域を大きくしました（width/ heightonを使用<filter>）。もちろん、シェイプがエフェクト領域の中央に配置されるように（ x/を使用して）再配置する必要があります。また、の属性をy使用してシャドウを少し下に移動しました。yfeOffset

補足：コメントでErikDahlströmが述べたように、for3の代わりにを使用すると、暗黙的にに設定されるため、この場合は同等です。同じことがandonとにも当てはまります。両方の表記を混ぜました。300%widthheightfilterUnitsobjectBoundingBox-1-100%xy

于 2012-11-23T06:27:18.723 に答える