<feMorphology>
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
<feMorphology> は SVG のフィルタープリミティブで、入力画像の拡大・縮小に用いられます。このプリミティブの有用性は、特に太らせたり痩せさせたりする効果にあります。
他のフィルタープリミティブと同様に、既定では色成分を linearRGB 色空間で処理します。 color-interpolation-filters を使用すると、代わりに sRGB を使用することができます。
使用コンテキスト
属性
DOM インターフェイス
この要素は SVGFEMorphologyElement インターフェイスを実装しています。
例
SVG コンテンツのフィルタリング
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
<text y="1em">Normal text</text>
<text id="thin" y="2em">Thinned text</text>
<text id="thick" y="3em">Fattened text</text>
</svg>
CSS
css
text {
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
HTML コンテンツのフィルタリング
SVG
html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<filter id="erode">
<feMorphology operator="erode" radius="1" />
</filter>
<filter id="dilate">
<feMorphology operator="dilate" radius="2" />
</filter>
</svg>
<p>Normal text</p>
<p id="thin">Thinned text</p>
<p id="thick">Fattened text</p>
CSS
css
p {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 3em;
}
#thin {
filter: url(#erode);
}
#thick {
filter: url(#dilate);
}
仕様書
| Specification |
|---|
| Filter Effects Module Level 1 # feMorphologyElement |
ブラウザーの互換性
Loading…