<feImage>
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
<feImage> は SVG のフィルタープリミティブで、外部ソースから画像データを取得し、そのピクセルデータを出力します(すなわち、外部ソースが SVG 画像である場合は、ラスタライズされます)。
使用コンテキスト
| カテゴリー | フィルター構成要素 |
|---|---|
| 許可されている内容 | 任意の数、任意の順序の以下の要素。<animate>、<animateTransform>、<set> |
属性
DOM インターフェイス
この要素は SVGFEImageElement インターフェイスを実装しています。
例
>SVG
html
<svg
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200"
height="200">
<defs>
<filter id="image">
<feImage href="mdn_logo_only_color.png" />
</filter>
</defs>
<rect x="10%" y="10%" width="80%" height="80%" filter="url(#image)" />
</svg>
結果
仕様書
| 仕様書 |
|---|
| Filter Effects Module Level 1> # feImageElement> |
ブラウザーの互換性
関連情報
- SVG フィルタープリミティブ属性
flood-color属性flood-opacity属性<filter><animate><animateTransform><set><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence>fetchpriority属性- SVG チュートリアル: フィルター効果