CSS의 SVG 경로 변화

SVG<path></path> 요소는 강력한 드로잉 기능을 제공하며 때로는 모양을 그리는 데 사용하려고합니다. 전체 기능에 대한 모피 만 알고 있지만 흥미로운 애니메이션 효과를 시도하는 것으로 충분합니다. 모든 선형 구문 명령 (예 : L )은 매우 간단하고 이해하기 쉽고 곡선 명령 Q 도 매우 직관적입니다. 도면을 viewBox="0 0 100 100" 으로 제한하면 간단한 그래프를 그리는 것은 어렵지 않습니다.

다음은 CSS를 사용하여 모든 기본 명령 및 애니메이션을 사용하여 그래픽을 그리는 전형적인 예입니다 (Chromium Browser 만 해당).

이상하게 보이지만 진짜 :

<svg viewbox="0 0 10 10"><path d="M2,2 L8,8"></path></svg>

 SVG : 호버 경로 {
  전환 : 0.2S;
  D : 경로 ( "M8,2 L2,8");
}

최근에, 나는 주에 따라 아이콘이 다른 UI 요소가 필요합니다. 그것은 "로그"모양과 비슷하며, 기본 상태는 똑바로, 햄버거 메뉴 (4 줄, 텍스트 줄과 비슷 함), 그리고 다른 여러 상태와 비슷합니다.

1. 기본값 (기본값)
2. 활동 (활동)
3. 성공 (성공)
4. 오류

먼저, 나는 매우 복잡한 유한 상태 기계를 썼습니다.

 const indicator = document.querySelector ( ". 요소");

CurrentState = indicator.dataset.state를하자;

indicator.addeventListener ( "클릭", () => {
  NextState = "";

  if (currentstate == "default") {
    NextState = "Active";
  } else if (currentstate == "active") {
    NextState = "성공";
  } else if (currentstate == "success") {
    NextState = "오류";
  } 또 다른 {
    NextState = "기본값";
  }

  indicator.dataset.state = Nextstate;
  CurrentState = NextState;
});

데이터 속성을 사용하여 스타일을 설정하기위한 도어가 열립니다.

 .요소 {
  & [data-state = "default"] {
  }
  & [data-state = "active"] {
  }
  & [data-state = "success"] {
  }
  & [data-state = "error"] {
  }
}

따라서 내 요소가 4 줄의 기본 상태로 시작하면 다음과 같습니다.

<div data-state="DEFAULT">
  <svg viewbox="0 0 100 100"><path d="M0, 20 Q50, 20 100, 20"></path><path d="M0, 40 Q50, 40 100, 40"></path><path d="M0, 60 Q50, 60 100, 60"></path><path d="M0, 80 Q50, 80 100, 80"></path></svg>
</div>

... CSS의 다른 주로 경로를 변경할 수 있습니다. 예를 들어, CSS를 사용 하여이 4 개의 직선을 변경할 수 있습니다.

이 4 개의 "선"에는 편리하게 사용되지 않은 곡선 지점이 포함되어 있습니다. 숫자와 포인트 유형을 가진 경로 만 CSS의 애니메이션 일 수 있습니다. 곡선 포인트를 추가하면 더 많은 가능성이 열립니다.

이 네 가지 새로운 경로는 실제로 원과 비슷한 모양을 그립니다!

 .Editor-Indicator {
  & [data-state = "active"] {
    .Icon {
      : nth-Child (1) {
        D : 경로 ( "M50, 0 Q95, 5 100,50");
      }
      : nth-Child (2) {
        D : 경로 ( "M100, 50 Q95, 95 50,100");
      }
      : nth-Child (3) {
        D : 경로 ( "M50,100 Q5, 95 0, 50");
      }
      : nth-Child (4) {
        D : 경로 ( "M0, 50 Q5, 5 50, 0");
      }
    }
  }
}

다른 주에서는 거친 진드기 (성공을 나타냅니다)와 거친 느낌표 (실패를 나타냅니다)를 그립니다.

데모 (Chromium Browser 만 해당),이를 클릭하여 상태를 변경할 수 있습니다.

Firefox와 Safari는 CSS에서 d: path() 지원하지 않기 때문에 결국 사용하지 않았습니다. 그것은 애니메이션이 될 수 없으며 단순히 작동하지 않으므로 나에게 사용할 수 없습니다. 나는 다른 상태로 아이콘을 교체했습니다.

브라우저에서 모양 변형이 필요한 경우 이에 대한 전체 기사가 있습니다. (기사 링크는 여기에 삽입되어야하지만 링크를 제공 할 수 없으므로 설명 할 수 있습니다).

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