CSS와 SVG의 실제 응용 프로그램은 무엇입니까?

개발자는 CSS를 사용하여 웹 콘텐츠의 스타일을 지정하고 올바르게 표현합니다. 모든 콘텐츠를 매력적으로 만드는 데 사용할 수 있습니다.

SVG의 전체 형태는 확장 가능한 벡터 이미지입니다. SVG는 jpg나 png와 같은 이미지 유형입니다. jpg 또는 png는 픽셀 격자를 사용하여 생성된 래스터 이미지입니다. 래스터 이미지를 확대하면 흐려지기 시작합니다.

벡터 이미지는 벡터를 그리고 연결하여 모양을 만드는 수학적 함수를 사용하여 생성됩니다. 픽셀 그리드가 아니기 때문에 100배 이상 확대해도 흐릿해지지 않습니다.

벡터 이미지와 함께 CSS를 사용할 때마다 더욱 매력적으로 보이고 웹 페이지에서 강력한 이미지를 만들 수 있습니다. 이 튜토리얼에서는 실제로 CSS와 SVG를 배우게 됩니다.

예제 1(SVG 이미지에 기본 스타일 추가)

아래 예에서는 SVG 형식으로 원을 만들었습니다. 우리는 SVG 이미지를 생성하기 위해 "svg" HTML 태그를 사용합니다. 또한 뷰 상자의 크기를 설정합니다. 또한 뷰 프레임에서 원의 x 및 y 위치를 설정합니다.

CSS에서 svg 이미지에 액세스하고 스타일을 지정하려면 "원" 태그를 사용합니다. 사용자는 CSS를 통해 채우기 색상, 획 색상 및 획 너비를 제어할 수 있음을 관찰할 수 있습니다. 그러나 다양한 CSS 속성을 사용하여 추가 스타일을 추가할 수도 있습니다.

으아아아

예 2(SVG 이미지에 호버 효과 추가)

아래 예에서는 SVG 벡터 형식으로 두 개의 사각형을 만들었습니다. 또한 각 모양에 클래스 이름을 할당했습니다. CSS의 클래스 이름을 사용하여 HTML 요소에 액세스하고 채우기 색상을 설정합니다. 또한 모양에 대한 호버 효과를 설정합니다. 출력에서 모양 위로 마우스를 가져가면 색상이 어떻게 변하는지 관찰할 수 있습니다.

으아아아

예 3(SVG 이미지에 애니메이션 추가)

아래 예에서는 SVG 이미지에 애니메이션을 추가합니다. 여기에서는 SVG를 사용하여 원을 만들었습니다. CSS에서는 ID를 사용하여 원에 액세스하고 이동 키프레임을 애니메이션으로 추가합니다.

이동 키프레임에서는 원의 수직 위치를 변경하여 튀는 원을 보여줍니다.

으아아아

SVG 이미지에 CSS를 사용하는 방법을 배웠습니다. 이 첫 번째 예에서는 CSS와 SVG의 기본 사용법을 배웠습니다. 두 번째 예에서는 SVG 이미지에 호버 효과를 추가했습니다. 이전 예에서는 SVG 이미지에 애니메이션을 추가했습니다.

실제 개발에서 사용자는 CSS와 SVG를 결합하여 애니메이션을 추가하고 GIF를 만들 수 있습니다.

위 내용은 CSS와 SVG의 실제 응용 프로그램은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!