CSS 내 SVG

CSS 인라인 SVG 필터 : 강력한 이미지 처리 팁

Stefan Judis의 "I Bread Today"(TIL) 기사는 CSS의 SVG 필터를 인라인으로 만드는 방법을 설명합니다. CSS의 filter 속성은 grayscale(100%) 등과 같은 일부 내장 기능을 지원하지만 SVG에서 정의한 필터를 가리킬 수도 있습니다. filter: url(#my-custom-filter) 은 필터가 인라인으로 정의됩니다.<svg></svg> 요소에서<filter></filter> 요소의 일부. 이 방법은 약간 서투른 HTML에 대한 참조가 필요합니다. 필터는 CSS에 통합하기에 더 논리적 인 시각적 효과입니다. 예는 다음과 같습니다.

 img {
  필터 : URL ( 'data : image/svg xml, \
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter color-interpolation-filters="linearRGB" filterunits="objectBoundingBox" height="140%" primitiveunits="userSpaceOnUse" width="140%" x="-20%" y="-20%"> \
        <feturbulence basefrequency="0.01 0.01" numoctaves="1" result="turbulence" seed="1" stitchtiles="noStitch" type="turbulence"></feturbulence> \
        <fedisplacementmap in="SourceGraphic" in2="turbulence" result="displacementMap" scale="20" xchannelselector="G" ychannelselector="A"></fedisplacementmap> \
      </filter>\
    </svg>#파도')
  ;
}

이것은 Stefan의 난기류 필터 예제이며 CSS만으로는 불가능합니다.

많은 수의 백 슬래시 ( \ )에 주목하십시오. 이것은 CSS가 템플릿 리터럴을 지원할 수 있기를 희망합니다. 동시에 코드 형식 도구 또는 압축 도구가 이러한 백 슬래시를 처리할지 여부도 관련이 있지만 실제로는 문제가 발생하지 않을 수 있습니다.

고맙게도 SVG 코드는 좋은 가독성과 편집성을 유지합니다. 따라서 CSS 및 실험에서 SVG 필터를 직접 편집 할 수 있습니다.

Yoksel의 도구에도 동일하게 적용됩니다. 2 색 및 3 색 이미지의 편집자는 매우 멋지다. 이 필터를 CSS에 직접 적용 할 수도 있습니다.

그러나 CSS에 상인 된 SVG는 필터에만 국한되지 않습니다. SVG 도면을 CSS에 직접 포함시킬 수도 있습니다.

이 방법은 최신 브라우저 (사파리 제외)에서 잘 작동합니다. 그러나 가까운 시일 내에 SVG에서 특수 문자를 더 많이 인코딩하여 작동하도록해야합니다 (Base64 인코딩이 필요하지는 않지만). Yoskel의 URL 인코더는이를 위해 설계되었지만 지금도 여전히 필요한지 모르겠습니다.

위 내용은 CSS 내 SVG의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!