집 >웹 프론트엔드 >CSS 튜토리얼 >인라인 SVG를 CSS 스타일에 직접 삽입할 수 있나요?

인라인 SVG를 CSS 스타일에 직접 삽입할 수 있나요?

Can Inline SVGs Be Embedded Directly in CSS Styles?

CSS의 인라인 SVG: 스타일에 벡터 그래픽 삽입

SVG 이미지를 CSS 스타일에 직접 삽입할 수 있나요? 다음 구문을 사용한다고 상상해 보세요.

.my-class {
  background-image: <svg>...</svg>;
}

답변:

예, CSS에서 인라인 SVG 정의를 사용하는 것이 실제로 가능합니다. 이를 달성하는 방법은 다음과 같습니다.

body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'>
        <linearGradient>

이 코드는 URL로 인코딩된 SVG 이미지를 생성하고 이를 요소. SVG는 선형 그라데이션과 전체 뷰포트를 채우는 직사각형으로 구성됩니다.

위 내용은 인라인 SVG를 CSS 스타일에 직접 삽입할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：