SVG HTML

Color Matrix Filter

This SVG example illustrates how to apply a color matrix filter.

ColorMatrixFilter.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="idColorMatrixFilter">
    <!-- Keep the green and alpha channels and throw out the rest -->
    <feColorMatrix type="matrix" values=
      "0 0 0 0 0
       0 1 0 0 0
       0 0 0 0 0
       0 0 0 1 0"/> 
  </filter>
  <!-- Original Version -->
  <circle cx="100" cy="100" r="75" fill="#AAAAFF" stroke="lightblue" stroke-width="10"></circle>
  <!-- Filtered Version -->
  <g style="filter: url(#idColorMatrixFilter)" transform="translate(200, 0)">
    <circle cx="100" cy="100" r="75" fill="#AAAAFF" stroke="lightblue" stroke-width="10"></circle>
  </g>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.