SVG 필터 1로 색상이 지정된 사진

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}
그리고 Matrix의 각 값/255를 교체합니다.

"1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0"

이 Matrix는 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}
그리고 Matrix의 각 값/255를 교체합니다.

"0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0

이 Matrix는 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에서 더 나은 시각적 결과를 위해 흑백 이미지를 사용합니다.

다음 시간에는 이러한 색상을 결합하여 이중톤 이미지를 얻는 방법을 보여드리겠습니다.