色付き写真SVGフィルタ1

2355 ワード
webdev css svg テキストリンク
fecolormatrix SVGフィルタ要素は、変換行列に基づいて色を変更します.最初にRGB形式で必要な色を取り、次に255の値を分割します.feColorMatrix =
[
[r,0,0,0,0], // red
[0,g,0,0,0], // green
[0,0,b,0,0], // blue
[0,0,0,1,0], // multiplyer
]例えば赤の場合:
RGB = { R : 255 , G : 0 , B : 0 ,不透明度: 1 }
を指定します.
"1 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 , 0 "
この行列は、fecolormatrix
<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="red">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#red)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

例えば、青色の場合:
RGB = { R : 0 , G : 0 , B : 255 ,不透明度: 1 }
を指定します.
"0 , 0 , 0 , 0 , 0 , 0 , 0 , 0 , 1 , 0 , 0 , 0 , 0 , 0 , 1 , 0
この行列は、fecolormatrix
<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="jsx-715889512 background fade-in" style="width: 100%; height: 100%;">
    <filter id="blue">
        <feColorMatrix type="matrix" values="1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0" color-interpolation-filters="sRGB"></feColorMatrix> 
    </filter>
    <image width="100%" height="100%" filter="url(#blue)" xlink:href="https://blackwhite.pictures/media/c/0904/fishing-rope-texture-2874.jpg"></image>
</svg>

この例のために、我々はblackwhite.pictures
次回は、我々はどのようにこれらの色を組み合わせて、十二指腸の画像を取得する方法を紹介します.
06. Type Ahead
[TIL 07] self-introduction ②