CSS 가이드의 SVG 특성

이 안내서는 CSS 특성을 사용한 SVG 요소 스타일링에 중점을 둔 CSS 및 SVG (Scalable Vector Graphics)의 교차점을 탐색합니다. 수많은 SVG 속성이 존재하지만, 특정 속성 (일반적으로 프리젠 테이션 속성) 만 CSS와 직접 스타일을 지정할 수 있습니다. 일부 CSS 속성은 SVG ( font-size 및 opacity )와 공유되는 반면 다른 CSS 속성은 SVG 특이 적입니다.

예를 들어, 요소 빨간색 fill 색칠하려면 fill 는 CSS에서 작동합니다.

 원 {
  채우기 : 빨간색;
}

이 안내서는 일반적인 스타일 및 애니메이션을 포함한 다양한 스타일 기법을 다루는 SVG 요소 및 해당 CSS 속성을 포괄적으로 자세히 설명합니다.

SVG 요소 및 CSS 속성 : 분류 된 개요

다음은 CSS 속성으로 사용할 수있는 프리젠 테이션 속성을 명확성으로 분류합니다. 더 이상 사용되지 않은 요소는 제외됩니다.

CSS 및 SVG 공유 속성

글꼴 특성

텍스트 속성

마스킹 특성

상호 작용 속성

색상 특성

가시성 속성

SVG- 특이 적 CSS 특성

텍스트 속성

클립 속성

마스킹 특성

필터 효과

그라디언트 특성

상호 작용 속성

색상 특성

그림 속성

SVG 2 및 CSS 스타일

프리젠 테이션 속성은 CSS와 SVG 스타일 사이의 간격을 연결하지만 SVG 2 (현재 후보 권장 사항)이 상호 작용을 크게 향상시켜 CSS를 사용한 요소 좌표 및 치수를 제어 할 수 있습니다.

SVG 2 사양은 다음을 명확히합니다.

"일부 스타일링 속성은 스타일 시트 및 '스타일'속성뿐만 아니라 프레젠테이션 속성에도 지정 될 수 있습니다. 이는 이름이 일치하고 주어진 CSS 속성과 해당 속성의 값으로 구문 분석되는 속성입니다."

이는 다음과 같은 의사 클래스를 포함한 CSS를 의미합니다. :hover 및 :active , 프리젠 테이션 속성 또는 스타일 시트를 통해 SVG 속성을 스타일로 만들 수 있습니다. SVG 2는 또한 스타일링을위한 추가 프레젠테이션 속성도 소개합니다. 전체 목록은 SVG 2 사양을 참조하십시오.

요소 별 속성 지원

CSS 속성 지원은 SVG 요소에 따라 다르다는 것을 기억하는 것이 중요합니다. 특정 속성은 요소별로 다릅니다. 예를 들어,<circle></circle> 그리고<ellipse></ellipse> cx , cy , rx 및 ry 지원하지만 다른 요소는 그렇지 않을 수 있습니다.

기하학적 특성

SVG 2는 rx 및 ry 와 같은 특성을 지오메트리 특성으로 정의하며 fill 또는 stroke 같은 프리젠 테이션 속성과 함께 CSS와의 스타일을 정의합니다.

CSS와 함께 SVG 요소 위치 (SVG 2)

SVG 2는 CSS 기반 포지셔닝을 허용합니다. 직사각형을 고려하십시오.

<svg height="170" width="170"><rect height="150" width="150" x="10" y="10"></rect></svg>

SVG 2를 사용하면 x 및 y 속성을 CSS를 통해 제어 할 수 있습니다.

 / * SVG 2 */와 함께 작동합니다.
rect {
  x : 10;
  Y : 10;
  / * ... 다른 스타일 ... */
}

SVG 마크 업 단순화 :

<svg height="170" width="170"><rect height="150" width="150"></rect></svg>

마찬가지로 CSS를 사용하여 width 와 height 설정하여 SVG 코드를 더 최소화 할 수 있습니다.

현재 Blink (Chrome, Opera) 및 WebKit (Safari) 브라우저는 이러한 SVG 2 기능을 더 잘 지원합니다. 더 넓은 호환성을 위해서는 대체 기술이 필요합니다.

CSS와의 SVG 모양 변형

CSS는 모양 변형 효과를 만드는 데 사용될 수 있습니다. 관련된 SVG 경로에는 동일한 명령과 성공적인 모핑을 위해 동일한 수의 포인트가 있어야합니다.

예 : 삼각형을 정사각형으로 변형합니다.

<svg height="220" width="300"><path d="M150 10 L40 200 L260 200Z"></path></svg>

경로를 무시하려면 CSS :

 길 {
  D : 경로 ( "M150, 10 L40, 200 L260, 200Z"); / * 초기 모양 */
  채우기 : #4C6EDB;
}

경로 : Active {
  D : 경로 ( "M10,10 L160,10 L160,160 L10,160 Z"); / * 변형 된 모양 */
  채우기 : #4C6EDB;
  전환 : 모든 0.35 초;
}

SVG 마크 업은 다음을 단순화합니다.

<svg height="220" width="300"><path></path></svg>

CSS로 SVG 속성 애니메이션

CSS 애니메이션 및 전환 SVG 속성에 애니메이션. 이 예제는 5 개의 서클이있는 웨이브 애니메이션을 보여줍니다.

<svg height="250" width="350"><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle><circle class="shape"></circle></svg>

변수가있는 CSS 및 :nth-child() :

 / * ... 색상 및 초기 원 스타일에 대한 CSS ... */

.모양 {
  / * ... 초기 스타일 ... */
  애니메이션 : Movecircle 1250ms의 편안함이 모두 무한합니다.
}

/ * ... 각 원에 대한 애니메이션 지연 ... */

@keyframes movecircle {
  50% {
    Cy : 150;
    R : 13;
  }
}

내면의 애니메이션<pattern></pattern> 요소도 가능합니다.

결론

SVG 2는 강력한 CSS 스타일 기능을 제공하지만 광범위한 브라우저 지원이 여전히 개발되고 있습니다. 생산 사용을 위해 호환성을 신중하게 고려하십시오. SVG 2가 성숙함에 따라 SVG 기하학적 특성의 CSS 스타일은 점점 더 강력하고 신뢰할 수있게 될 것입니다.

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