CSS 의사 요소에 SVG를 성공적으로 포함하려면 어떻게 해야 합니까?

의사 요소에 SVG 삽입

:before 또는 ::after와 같은 의사 요소에 SVG 이미지를 삽입하면 CSS 스타일에 새로운 차원이 적용됩니다. 이 기술을 사용하면 사용자 정의 그래픽과 일러스트레이션으로 웹 디자인을 시각적으로 향상시킬 수 있습니다.

제공된 예에서 개발자는 ::before를 사용하여 선택한 요소 앞에 SVG 아이콘을 배치하려고 했습니다. 그러나 코드가 SVG 코드의 일반 텍스트만 표시하는 문제가 발생했습니다.

이를 수정하려면 사양에 지정된 CSS 콘텐츠 속성의 제한 사항을 이해하는 것이 중요합니다. 다행히도 간단하고 효과적인 해결책이 있습니다. url() 함수를 사용하여 SVG 파일의 경로를 지정하는 것입니다. 이 접근 방식을 사용하면 외부 SVG 이미지를 의사 요소에 포함할 수 있습니다.

#test::before {
  content: url(path/to/your.svg);
  width: 200px;
  height: 200px;
}

또는 데이터 URI 구성표를 사용하여 CSS 내부에 SVG를 직접 삽입할 수도 있습니다.

#test::before {
  content: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg'></svg>");
  width: 200px;
  height: 200px;
}

이러한 방법을 사용하면 SVG 그래픽을 의사 요소에 원활하게 통합하여 웹 페이지의 시각적 매력을 높이고 웹 페이지에 창의성을 불어넣을 수 있습니다. 디자인합니다.

위 내용은 CSS 의사 요소에 SVG를 성공적으로 포함하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!