この翻訳は不完全です。英語から この記事を翻訳 してください。

The <feColorMatrix> SVG filter element changes colors based on a transformation matrix. Every pixel's color value (represented by an [R,G,B,A] vector) is matrix multiplied to create a new color:

| R' |     | a00 a01 a02 a03 a04 |   | R |
| G' |     | a10 a11 a12 a13 a14 |   | G |
| B' |  =  | a20 a21 a22 a23 a24 | * | B |
| A' |     | a30 a31 a32 a33 a34 |   | A |
| 1  |     |  0   0   0   0   1  |   | 1 |

Usage context

カテゴリーFilter primitive element
許可された内容任意の数、任意の順で以下の要素を配置可能:
<animate><set>

属性

Global attributes

Specific attributes

DOM インターフェイス

This element implements the SVGFEColorMatrixElement interface.

SVG

<svg width="100%" height="100%" viewBox="0 0 150 360"
    preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- matrix -->
  <filter id="colorMeMatrix">
    <feColorMatrix in="SourceGraphic"
        type="matrix"
        values="0 0 0 0 0
                1 1 1 1 0
                0 0 0 0 0
                0 0 0 1 0" />
  </filter>
  <use href="#circles" transform="translate(0 70)" filter="url(#colorMeMatrix)" />
  <text x="70" y="120">matrix</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic"
        type="saturate"
        values="0.2" />
  </filter>
  <use href="#circles" transform="translate(0 140)" filter="url(#colorMeSaturate)" />
  <text x="70" y="190">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic"
        type="hueRotate"
        values="180" />
  </filter>
  <use href="#circles" transform="translate(0 210)" filter="url(#colorMeHueRotate)" />
  <text x="70" y="260">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic"
        type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 280)" filter="url(#colorMeLTA)" />
  <text x="70" y="320">luminanceToAlpha</text>
</svg>

Result

ScreenshotLive sample

仕様

仕様書 ステータス コメント
Filter Effects Module Level 1
<feColorMatrix> の定義
草案 変更なし
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
<feColorMatrix> の定義
勧告 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
feColorMatrixChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
inChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
typeChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
valuesChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 ありIE 完全対応 ありOpera 完全対応 ありSafari ? WebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

あわせて参照

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,