0

滑らかな境界線を持つ長方形を作成したい。立体部分の大きさが決まっている重要なパーツです。明確にするために、例を挙げます。

ガウス フィルターを使用して目的の効果を得ることができます。

<svg id="svg-root" width="800" height="600"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="test-body-content">
    <defs>
      <filter id="blur" filterUnits="userSpaceOnUse">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
       <feMerge>
         <feMergeNode in="blur" />
       </feMerge>
      </filter>
    </defs>
    <rect x="50" y="50" width="200" height="100" fill="black" filter="url(#blur)"/>
  </g>
</svg>

結果：

rect1

ただし、指定された寸法 (width="200" height="100") 内で完全に固体ではないため、要件を満たしていません。

ここに画像の説明を入力

また、ストロークに対して垂直にグラデーションを適用することも考えましたが、SVG はそのようなことをサポートしていません。

4

1 に答える 1

1

@ABFORCE が書いたように、filter要素を介して必要な幅と高さを指定できます。

例えば：

<filter id="blur" filterUnits="objectBoundingBox" 
        x="0" y="0" width="100%" height="100%">
   ...
</filter>

これは、上記のフィルタがフィルタされた要素の境界ボックスにクリップされることを意味することに注意してください。

フィルター出力に元の形状が必要な場合は、次のように別の feMergeNode を追加できます。

<svg id="svg-root" width="800" height="600"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <g id="test-body-content">
    <defs>
      <filter id="blur" filterUnits="userSpaceOnUse">
       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
       <feMerge>
         <feMergeNode in="blur" />
         <feMergeNode in="SourceGraphic"/>
       </feMerge>
      </filter>
    </defs>
    <rect x="50" y="50" width="200" height="100" fill="black" filter="url(#blur)"/>
  </g>
</svg>

実例。

于 2013-08-26T12:57:41.757 に答える