CSS 사용자 정의 속성을 갖춘 멋진 SVG — Smashing Magazine

최근에 제가 어떻게 사용하는지 설명했어요 , 적응형 SVG라고 부르는 것을 개발하기 위한 CSS 미디어 쿼리도 있습니다. 기호를 사용하면 요소를 한 번 정의한 다음 사용 이를 통해 SVG 애니메이션을 더 쉽게 유지 관리하고 더 효율적이며 가볍게 만들 수 있습니다.

설명을 작성한 이후로 저는 제 웹사이트 전반에 걸쳐 새로운 Magnificent 7 애니메이션 그래픽을 디자인하고 구현했습니다. 그들은 7명의 웅장한 옛 서부 캐릭터를 특징으로 하는 웹 디자인 선구자 테마를 다루고 있습니다.

그리고 캐릭터 디자인을 정의하고 이를 여러 SVG와 페이지에서 재사용하겠습니다. 먼저 캐릭터를 생성하고 각각의 캐릭터를 숨겨진 라이브러리 내부 SVG:

그런 다음 두 개의 다른 SVG에서 해당 기호를 참조했습니다. 하나는 큰 화면용이고 다른 하나는 작은 화면용입니다.

우아한. 그런데 화가 났습니다. 캐릭터를 재사용할 수는 있지만 애니메이션을 적용하거나 스타일을 지정할 수는 없었습니다. 에서 참조하는 기호 내의 요소를 대상으로 하는 CSS 규칙을 추가했습니다. 하지만 아무 일도 일어나지 않았습니다. 색상은 동일하게 유지되었고, 움직여야 할 것들은 그대로 유지되었습니다. 보이지 않는 장벽에 부딪힌 것 같았고 그랬습니다.

Shadow DOM 장벽 이해

내용을 참고할 때 symbol ~와 함께 use브라우저는 Shadow DOM에 복사본을 생성합니다. 각 인스턴스는 참조된 인스턴스의 캡슐화된 복사본이 됩니다. 즉, 외부의 CSS는 요소의 스타일을 직접 지정하기 위한 장벽을 뚫을 수 없습니다. 예를 들어, 일반적인 상황에서는 다음과 같습니다. tapping 값은 CSS 애니메이션을 트리거합니다.

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

하지만 동일한 애니메이션이 같은 발의 경우 아무 일도 일어나지 않습니다.

.tapping {
  animation: tapping 1s ease-in-out infinite;
}

그 이유는 안에 요소가 보호된 섀도우 트리에 있고 CSS Cascade가 중단되었습니다. 경계. 이 동작은 실망스러울 수 있지만 재사용된 기호 콘텐츠가 일관되고 예측 가능하게 유지되도록 의도적인 것입니다.

적응형 SVG를 개발하는 방법을 배우는 동안 이 동작을 해결하려는 모든 종류의 시도를 발견했지만 대부분은 SVG를 우아하게 만드는 재사용성을 희생했습니다. 나는 단지 다른 시간에 깜박이게 만들기 위해 내 캐릭터를 복제하고 싶지 않았습니다. 나는 싱글을 원했다 고유한 타이밍과 표현이 있는 인스턴스가 있습니다.

구조를 위한 CSS 사용자 정의 속성

나의 선구적인 애니메이션을 작업하면서 나는 다음과 같은 사실을 배웠다. 일반 CSS 값은 경계를 넘어 Shadow DOM으로 들어갈 수 없지만 CSS 사용자 정의 속성은. 그리고 내부 요소의 스타일을 직접 지정할 수는 없지만 사용자 정의 속성 값을 전달할 수 있습니다. 따라서 인라인 스타일에 사용자 정의 속성을 삽입하면 브라우저는 캐스케이드를 확인하고 해당 스타일은 내부 요소에서 사용할 수 있게 됩니다. 참조되고 있습니다.

나는 추가했다 rotate 인라인 스타일에 적용 콘텐츠:

그런 다음 발 두드리기 애니메이션을 정의하고 요소에 적용했습니다.

@keyframes tapping {
  0%, 60%, 100% { --foot-rotate: 0deg; }
  20% { --foot-rotate: -5deg; }
  40% { --foot-rotate: 2deg; }
}

use[data-outlaw="1"] {
  --foot-rotate: 0deg;
  animation: tapping 1s ease-in-out infinite;
}

여러 값을 기호에 전달하기

CSS 사용자 정의 속성을 사용하기 위해 심볼을 설정한 후에는 원하는 만큼 많은 값을 전달할 수 있습니다. 사례. 예를 들어 다음과 같은 변수를 정의할 수 있습니다. fill, opacity또는 transform. 우아한 점은 각각 그러면 인스턴스는 고유한 값 세트를 가질 수 있습니다.

use[data-outlaw="1"] {
  --eyelids-colour: #f7bea1; 
  --eyelids-opacity: 1;
}

use[data-outlaw="2"] {
  --eyelids-colour: #ba7e5e; 
  --eyelids-opacity: 0;
}

이와 같은 CSS 사용자 정의 속성 전달에 대한 지원은 확실하며 모든 최신 브라우저는 이 동작을 올바르게 처리합니다. 다양한 색상의 아이콘 시스템을 시작으로 이 기술을 사용해 온 몇 가지 방법을 보여드리겠습니다.

다양한 색상의 아이콘 시스템

아이콘 세트를 유지해야 하는 경우 아이콘을 한 번만 정의하면 됩니다. 그런 다음 사용자 정의 속성을 사용하여 색상과 효과를 적용합니다. 모든 테마에 대해 SVG를 복제할 필요 없이 use 그 자체의 가치를 지닐 수 있습니다.

예를 들어, 저는 --icon-fill 기본값에 대한 사용자 정의 속성 fill 색상 이 Bluesky 아이콘에서:

그런 다음 해당 아이콘의 모양을 변경해야 할 때마다(예: