CSS로 확장 가능한 벡터 그래픽 (SVG) 스타일 지정
오늘은 SVG (Scalable Vector Graphic)에 대한 토론을 계속할 예정이며 이전 게시물에서 지적했듯이 SVG 사용의 장점 중 하나는 CSS로 스타일을 지정할 수 있다는 것입니다.
SVG 스타일 속성
SVG 스타일링은 기본적으로 일반 HTML 요소와 동일한 방식으로 작동합니다. 실제로 일부 공통 속성도 공유합니다. 그러나 CSS와는 별도의 고유 한 사양을 가진 SVG 객체를 위해 특별히 고안된 다른 속성이 있습니다..
예를 들어, 일반 HTML 요소에서 백그라운드 색상을 배경색 또는 배경 CSS 속성. SVG에서, 그것은 조금 다릅니다; 배경색은 가득 따르다 속성 대신. 또한 요소의 테두리는 행정 재산이 아니며 경계 정규 HTML에서와 마찬가지로 전체 목록을 볼 수 있습니다..
Adobe Illustrator와 같은 벡터 편집기로 작업하는 경우 SVG의 속성 명명 메커니즘이 편집기에서 비롯된 것임을 빠르게 추측 할 수 있습니다.
SVG 스타일 구현
SVG 요소의 스타일을 지정하는 데 다음 방법 중 하나를 사용할 수 있습니다.
프레젠테이션 속성
모든 SVG 속성 목록을 본 적이 있다면 요소의 모든 내용을 요소에 직접 추가하여 요소의 표현을 변경할 수 있습니다. 다음 예는 우리가 가득 따르다 과 행정 재산에 직접 직사각형의 요소;
사각형은 아래의 스크린 샷처럼 나타납니다.
인라인 스타일 시트
스타일을 추가 할 수도 있습니다. 스타일 속성. 다음 예제에서 우리는 또한 가득 따르다 과 행정 ~로 직사각형의, 그러나 이번에는 스타일 CSS3로 회전 시키세요. 변환 그렇게, 재산;.
직사각형은 동일한 결과로 회전하며, 이제는 회전도됩니다.
내부 스타일 시트
SVG 스타일을 스타일 요소도 가능하며 일반 HTML에서 사용한 방법과 다르지 않습니다. 아래의 예제는 내부 스타일을 추가하여 SVG 요소에 영향을주는 방법을 보여줍니다. .HTML 문서.
그러나 SVG는 XML 기반 언어이므로 인라인 스타일 시트를 추가 할 때 .svg 문서에서 스타일 선언을 내부에 넣어야합니다. cdata, 다음과 같이;
그만큼 cdata CSS가 가질 수 있기 때문에 여기에 필요합니다. > XML 파서와 충돌하는 문자. 사용 cdata 스타일 시트에 충돌 문자가 주어지지 않아도 SVG에 스타일을 포함시키는 것이 좋습니다..
외부 스타일 시트
외부 스타일 시트는 또한 SVG 요소에 대해 동일한 방식으로 작동합니다. .HTML 문서.
다시 .svg 문서에서 우리는 외부 스타일 쉬트를 XML 스타일 시트, 그렇게.
요소 그룹화
SVG 요소는
사각형과 원 모두 동일한 결과를 갖습니다..
최종 생각
CSS로 SVG를 스타일링하는 데 필요한 모든 필수 사항들을 살펴 봤습니다. 이것은 SVG로 그래픽을 제공하는 것의 장점 중 하나 일뿐입니다. 다음 글에서는 다른 것을 더 살펴볼 예정이므로 계속 지켜봐 주시기 바랍니다..
- 데모보기
- 소스 다운로드
