From 73341f02524b581bdd1ba25736d51d5fe8362c37 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 19 Oct 2021 10:10:31 +0900 Subject: Web/SVG/Element/feMorphology を新規翻訳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/19 時点の英語版に基づき新規翻訳 --- files/ja/web/svg/element/femorphology/index.md | 148 +++++++++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 files/ja/web/svg/element/femorphology/index.md diff --git a/files/ja/web/svg/element/femorphology/index.md b/files/ja/web/svg/element/femorphology/index.md new file mode 100644 index 0000000000..2e157f42ad --- /dev/null +++ b/files/ja/web/svg/element/femorphology/index.md @@ -0,0 +1,148 @@ +--- +title: +slug: Web/SVG/Element/feMorphology +tags: + - 要素 + - NeedsBrowserCompatibility + - NeedsContent + - NeedsMobileBrowserCompatibility + - SVG + - SVG フィルター +browser-compat: svg.elements.feMorphology +translation_of: Web/SVG/Element/feMorphology +--- +{{SVGRef}} + +**``** は [SVG](/ja/docs/Web/SVG) のフィルタープリミティブで、入力画像の拡大・縮小に用いられます。このプリミティブの有用性は、特に太らせたり痩せさせたりする効果にあります。 + +## 使用場面 + +{{svginfo}} + +## 属性 + +### グローバル属性 + +* [コア属性](/ja/docs/Web/SVG/Attribute#core_attributes) +* [プレゼンテーション属性](/ja/docs/Web/SVG/Attribute#presentation_attributes) +* [Filter primitive attributes](/ja/docs/Web/SVG/Attribute#filter_primitive_attributes) +* {{SVGAttr("class")}} +* {{SVGAttr("style")}} + +### 特有の属性 + +* {{SVGAttr("in")}} +* {{SVGAttr("operator")}} +* {{SVGAttr("radius")}} + +## DOM インターフェイス + +この要素は {{domxref("SVGFEMorphologyElement")}} インターフェイスを実装しています。 + +## 例 + +

SVG コンテンツのフィルタリング

+ +#### SVG + +```html + + + + + + + + Normal text + Thinned text + Fattened text + +``` + +#### CSS + +```css +text { + font-family: Arial, Helvetica, sans-serif; + font-size: 3em; +} + +#thin { + filter: url(#erode); +} + +#thick { + filter: url(#dilate); +} +``` + +{{EmbedLiveSample("Filtering_SVG_content", 340, 180)}} + +

HTML コンテンツのフィルタリング

+ +#### SVG + +```html + + + + + + + + + +

Normal text

+

Thinned text

+

Fattened text

+``` + +#### CSS + +```css +p { + margin: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 3em; +} + +#thin { + filter: url(#erode); +} + +#thick { + filter: url(#dilate); +} +``` + +{{EmbedLiveSample("Filtering_HTML_content", 340, 180)}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +* {{SVGElement("filter")}} +* {{SVGElement("animate")}} +* {{SVGElement("set")}} +* {{SVGElement("feBlend")}} +* {{SVGElement("feColorMatrix")}} +* {{SVGElement("feComponentTransfer")}} +* {{SVGElement("feComposite")}} +* {{SVGElement("feConvolveMatrix")}} +* {{SVGElement("feDiffuseLighting")}} +* {{SVGElement("feDisplacementMap")}} +* {{SVGElement("feFlood")}} +* {{SVGElement("feGaussianBlur")}} +* {{SVGElement("feImage")}} +* {{SVGElement("feMerge")}} +* {{SVGElement("feOffset")}} +* {{SVGElement("feSpecularLighting")}} +* {{SVGElement("feTile")}} +* {{SVGElement("feTurbulence")}} +* [SVG チュートリアル: フィルター効果](/ja/docs/Web/SVG/Tutorial/Filter_effects) -- cgit v1.2.3-54-g00ecf