QQ 아이콘에 대해 이야기해보자
1. 빨간색과 회색 QQ 아이콘을 PNG 이미지에 배치하고 배경 위치 및 오버:숨김을 통해 아이콘 표시를 제어합니다.
2. QQ 아이콘을 글꼴로 만들고 글꼴을 참조합니다. 예를 들어 QQ 아이콘은 문자 A에 해당하며 다음과 같이 사용할 수 있습니다. 계열: my-font color:red ">A
3. svg-filter 필터를 사용하여 QQ 사진을 색칠해보세요. 아래는 svg 필터입니다.
<span style="color: #0000ff;"><</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="160"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="160"</span><span style="color: #ff0000;"> viewBox</span><span style="color: #0000ff;">="0 0 160 160"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">><</span><span style="color: #800000;">filter </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="a"</span><span style="color: #ff0000;"> color-interpolation-filters</span><span style="color: #0000ff;">="sRGB"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="arithmetic"</span><span style="color: #ff0000;"> k2</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feFlood </span><span style="color: #ff0000;">flood-opacity</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> flood-color</span><span style="color: #0000ff;">="#3A9E00"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="flood1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="flood1"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="multiply"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="blend1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="screen"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="blend2"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #ff0000;"> in2</span><span style="color: #0000ff;">="SourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="in"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">result</span><span style="color: #0000ff;">="fbSourceGraphicAlpha"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="arithmetic"</span><span style="color: #ff0000;"> k2</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="composite1"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feFlood </span><span style="color: #ff0000;">flood-opacity</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> flood-color</span><span style="color: #0000ff;">="#3A9E00"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="flood1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="colormatrix1"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="flood1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="multiply"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend1"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feBlend </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="blend1"</span><span style="color: #ff0000;"> mode</span><span style="color: #0000ff;">="screen"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="blend2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feColorMatrix </span><span style="color: #ff0000;">in</span><span style="color: #0000ff;">="blend2"</span><span style="color: #ff0000;"> values</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="saturate"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #0000ff;">/><</span><span style="color: #800000;">feComposite </span><span style="color: #ff0000;">in2</span><span style="color: #0000ff;">="fbSourceGraphic"</span><span style="color: #ff0000;"> in</span><span style="color: #0000ff;">="colormatrix2"</span><span style="color: #ff0000;"> operator</span><span style="color: #0000ff;">="in"</span><span style="color: #ff0000;"> result</span><span style="color: #0000ff;">="composite2"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">filter</span><span style="color: #0000ff;">></</span><span style="color: #800000;">defs</span><span style="color: #0000ff;">><</span><span style="color: #800000;">ellipse </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="310.637"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="460.673"</span><span style="color: #ff0000;"> rx</span><span style="color: #0000ff;">="162.715"</span><span style="color: #ff0000;"> ry</span><span style="color: #0000ff;">="154.262"</span><span style="color: #ff0000;"> transform</span><span style="color: #0000ff;">="matrix(.38065 0 0 .4103 -38.244 -109.02)"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="#d3d7cf"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="#2e3436"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> stroke-linecap</span><span style="color: #0000ff;">="round"</span><span style="color: #ff0000;"> stroke-linejoin</span><span style="color: #0000ff;">="round"</span><span style="color: #ff0000;"> stroke-opacity</span><span style="color: #0000ff;">=".571"</span><span style="color: #ff0000;"> filter</span><span style="color: #0000ff;">="url(#a)"</span><span style="color: #0000ff;">/></</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span>
이 SVG를 로컬 폴더에 저장하고 이름을 filter-test.svg로 지정하세요. 아이콘 색상을 변경하려면 CSS에 filter:url(filter-test. svg#a)- -----참고: 내 svg에는 ID가 a인 필터가 하나만 있습니다.
요약하면 첫 번째 방법은 디자이너에게 피곤하고 아이콘 이미지가 매우 크고 CSS 제어가 번거롭습니다. 아틀라스인 경우 변위를 계산해야 하며 두 번째 방법은 간단하지만 효과가 제한됩니다. 세 번째 방법은 매우 좋습니다. 아이콘에 스타일을 추가하려면 SVG 필터 세트를 만든 다음 필터를 통해 적용하면 됩니다. 브라우저는 SVG와 필터를 지원합니다.
그렇습니다. 개인적으로는 마지막 방법이 재사용과 공유를 위해 온라인에 걸 수 있는 필터이기 때문에 점차 이전 방법을 대체할 것이라고 생각합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
