Your Search Results

    feColorMatrix

    This filter 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.

    Usage context

    Categories Filter primitive element
    Permitted content Any number of the following elements, in any order:
    <animate>, <set>
    Normative document SVG 1.1 (2nd Edition)

    Example

    <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">
    
      <text x="70" y="50">Reference</text>
      <g>
        <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>
    
    
      <text x="70" y="120">matrix</text>
    
      <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>
    
      <g filter="url(#colorMeMatrix)">
        <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
      </g>
    
    
      <text x="70" y="190">saturate</text>
    
      <filter id="colorMeSaturate">
        <feColorMatrix in="SourceGraphic"
          type="saturate"
          values="0.2" />
      </filter>
    
      <g filter="url(#colorMeSaturate)">
        <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
        <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
      </g>
    
    
      <text x="70" y="260">hueRotate</text>
    
      <filter id="colorMeHueRotate">
        <feColorMatrix in="SourceGraphic"
          type="hueRotate"
          values="180" />
      </filter>
    
      <g filter="url(#colorMeHueRotate)">
        <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
      </g>
    
    
      <text x="70" y="320">luminanceToAlpha</text>
    
      <filter id="colorMeLTA">
        <feColorMatrix in="SourceGraphic"
          type="luminanceToAlpha" />
      </filter>
    
      <g filter="url(#colorMeLTA)">
        <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
        <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
        <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
      </g>
    </svg>

    The rendering for this example is:

    ScreenshotLive sample

    Attributes

    Global attributes

    Specific attributes

    DOM Interface

    This element implements the SVGFEColorMatrixElement interface.

    See also

    Attachments

    File Size Date Attached by
    Expected rendering
    Expected rendering for the example
    32660 bytes 2012-11-28 11:51:20 Jeremie

    Document Tags and Contributors

    Contributors to this page: kscarfone, erickj, Manuel_Strehl, trevorh, Jeremie
    Last updated by: erickj,