찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법

마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법

Lisa Kudrow
Lisa Kudrow원래의
2025-03-18 11:03:23826검색

마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법

우리는 잘 알려진 차트 유형이 많이 있습니다 : 바, 도넛, 라인, 파이, 이름을 지정합니다. 모든 인기있는 차트 라이브러리가이를 지원합니다. 그런 다음 이름이없는 차트 유형이 있습니다. 상대 크기를 시각화하는 데 도움이되는 쌓인 (중첩) 사각형이있는이 Dreamt-Up 차트를 확인하십시오.

우리가 만드는 것

상호 작용이 없으면이 디자인을 만드는 것은 매우 간단합니다. 이를 수행하는 한 가지 방법은 왼쪽 하단 모서리가 모두 같은 지점에 닿는 크기가 감소하는 요소 (예 : SVG 요소 또는 HTML DIV)를 쌓는 것입니다.

그러나 상호 작용을 소개하면 상황이 까다로워집니다. 그 방법은 다음과 같습니다. 마우스를 모양 중 하나 위로 움직일 때 다른 사람들이 사라지고 멀어지기를 원합니다.

우리는 사각형과 마스크를 사용하여 이러한 불규칙한 모양을 만들어냅니다 - 및 요소와 함께 리터럴 . 당신이 완전히 마스크를 처음 사용한다면, 당신은 올바른 장소에 있습니다. 이것은 입문 수준의 기사입니다. 당신이 더 맛이 나면, 아마도이 컷 아웃 효과는 당신과 함께 할 수있는 트릭 일 것입니다.

이제 시작하기 전에 SVG에 대한 더 나은 대안이 사용자 정의 모양을 사용하는지 궁금 할 것입니다. 그것은 확실히 가능성입니다! 그러나 로 모양을 그리는 것은 위협적이거나 지저분해질 수 있습니다. 따라서 우리는 동일한 모양과 효과를 얻기 위해 "더 쉬운"요소로 작업하고 있습니다.

예를 들어, 를 사용하여 가장 큰 파란색 모양을 나타내는 방법은 다음과 같습니다.

 <svg viewbox="0 320 320">
  <path d="M320 0H0V56H264V320H320V0Z" fill="#264653"></path>
</svg>

0H0V56이 당신에게 의미가없는 경우, 구문에 대한 철저한 설명을 보려면“SVG Path Syntax : 그림 가이드”를 확인하십시오.

차트의 기본 사항

다음과 같은 데이터 세트가 주어졌습니다.

 type dataSetentry = {
  레이블 : 문자열;
  가치 : 숫자;
};

type dataset = dataSetentry [];

const rawdataset : dataset = [
  {레이블 : 'bad', value : 1231},
  {레이블 : '시작', 값 : 6321},
  {레이블 : '개발', 가치 : 10028},
  {레이블 : '달성', 가치 : 12123},
  {레이블 : '예시', 가치 : 2120}
];

… 우리는 다음과 같은 SVG로 끝나고 싶습니다.

 <svg viewbox="0 320 320">
  <rect width="320" height="320" y="0" fill="..."> </rect>
  <rect width="264" height="264" y="56" fill="..."> </rect>
  <rect width="167" height="167" y="153" fill="..."> </rect>
  <rect width="56" height="56" y="264" fill="..."> </rect>
  <rect width="32" height="32" y="288" fill="..."> </rect>
</svg>

가장 높은 값을 결정합니다

우리가 가장 높은 가치가 필요한 이유는 분명해질 것입니다. 우리는 math.max ()를 사용하여 얻을 수 있습니다. 그것은 여러 인수를 받아들이고 세트에서 가장 높은 값을 반환합니다.

 const dataSethestValue : number = math.max (
  ... RawDataset.map ((Entry : DataSetentry) => Entry.Value)
);

우리는 작은 데이터 세트가 있기 때문에 12123을 얻을 것이라고 말할 수 있습니다.

직사각형의 치수를 계산합니다

디자인을 보면 가장 높은 값 (12123)을 나타내는 사각형은 차트의 전체 영역을 포함합니다.

우리는 SVG 치수에 대해 임의로 320을 선택했습니다. 사각형은 제곱이므로 너비와 높이는 동일합니다. 12123을 320과 동일하게 만드는 방법은 무엇입니까? 덜 "특별한"값은 어떻습니까? 6321 사각형은 얼마나 큽니까?

다른 방법으로, 우리는 한 범위 ([0, 12123])에서 다른 범위 ([0, 320])에 숫자를 어떻게 매핑합니까? 또는 더 많은 수학 용어로 변수를 [a, b]의 간격으로 어떻게 확장합니까?

우리의 목적을 위해, 우리는 다음과 같은 기능을 구현할 것입니다.

 const remapvalue = (
  가치 : 숫자,
  Frommin : 숫자,
  Frommax : 숫자,
  Tomin : 숫자,
  Tomax : 숫자
) : 번호 => {
  return ((value -frommin) / (Frommax -Frommin)) * (Tomax -Tomin) Tomin;
};

REMAPVALUE (1231, 0, 12123, 0, 320); // 32
REMAPVALUE (6321, 0, 12123, 0, 320); // 167
REMAPVALUE (12123, 0, 12123, 0, 320); // 320

코드의 동일한 범위에 값을 매핑하므로 최소 및 최대 값을 반복해서 전달하는 대신 래퍼 기능을 만들 수 있습니다.

 const valueremapper = (
  Frommin : 숫자,
  Frommax : 숫자,
  Tomin : 숫자,
  Tomax : 숫자
) => {
  return (값 : 번호) : 숫자 => {
    리턴 remapvalue (Min, Frommax, Tomin, Tomax);
  };
};

const remapdatasetvaluetosvgdimension = valueremapper (
  0,
  DataSethestValue,
  0,
  svgdimension
);

우리는 다음과 같이 사용할 수 있습니다.

 remapdatasetvaluetosvgdimension (1231); // 32
remapdatasetvaluetosvgdimension (6321); // 167
remapdatasetvaluetosvgdimension (12123); // 320

DOM 요소를 작성하고 삽입합니다

남아있는 것은 DOM 조작과 관련이 있습니다. 우리는 와 다섯

더 일반적인 CreateElement 대신 CreateElementns를 사용하고 있습니다. 우리는 SVG와 협력하고 있기 때문입니다. HTML 및 SVG 요소는 사양이 다르므로 다른 네임 스페이스 URI에 속합니다. CreateElement가 HTML 네임 스페이스를 편리하게 사용하는 것입니다! 따라서 SVG를 만들려면이 장점이어야합니다.

 svgsvgelement로서 document.createelementns ( 'http://www.w3.org/2000/svg', 'svg');

분명히 다른 도우미 기능을 만들 수 있습니다.

 constrestesvgnselement = (요소 : 문자열) : svgelement => {
  return document.createElementns ( 'http://www.w3.org/2000/svg', 요소);
};

우리가 직사각형을 DOM에 추가 할 때, 우리는 그들의 명령에주의를 기울여야합니다. 그렇지 않으면 z-index를 명시 적으로 지정해야합니다. 첫 번째 직사각형은 가장 큰 사각형이어야하며 마지막 사각형은 가장 작아야합니다. 루프 전에 데이터를 정렬하는 것이 가장 좋습니다.

 const data = rawdataset.sort (
  (A : DataSetentry, B : DataSetentry) => B. value- a.Value
);

data.foreach ((d : dataSetentry, index : number) => {
  const rect : svgrecteLement = svgrectElement ( 'rect');
  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);

  rect.setattribute ( 'width',`$ {rectdimension}`);
  rect.setAttribute ( '높이',`$ {rectdimension}`);
  rect.setAttribute ( 'y',`$ {svgdimension- rectdimension}`);

  svg.appendchild (rect);
});

좌표계는 왼쪽 상단에서 시작됩니다. 그것이 [0, 0]이있는 곳입니다. 우리는 항상 왼쪽에서 사각형을 그릴 것입니다. 수평 위치를 제어하는 ​​X 속성은 기본값을 0으로 설정하므로 설정할 필요가 없습니다. y 속성은 수직 위치를 제어합니다.

모든 사각형이 왼쪽 모서리에 닿는 것과 같은 지점에서 유래한다는 시각적 인상을주기 위해서는 사각형을 아래로 밀어서 말해야합니다. 얼마나? 사각형이 채워지지 않는 정확한 양. 그리고 그 값은 차트의 치수와 특정 사각형의 차이입니다. 우리가 모든 비트를 합치면, 우리는 이것으로 끝납니다.

우리는 이미 CSS를 사용 하여이 데모에 애니메이션 코드를 추가했습니다.

컷 아웃 직사각형

우리는 사각형을 숫자 7처럼 보이는 불규칙한 모양으로 바꾸어야합니다.

우리가“누락 된 부품”에 집중한다면, 우리는 이미 우리와 함께 일하고있는 것과 동일한 직사각형의 컷 아웃을 볼 수 있습니다.

우리는 그 컷 아웃을 숨기고 싶습니다. 그것이 우리가 원하는 L 자형으로 끝날 방법입니다.

마스킹 101

마스크는 당신이 정의하고 나중에 요소에 적용하는 것입니다. 일반적으로 마스크는 요소에 속한 요소에 상거됩니다. 그리고 일반적으로 마스크를 요소에 적용하기 위해 참조해야하기 때문에 고유 한 ID가 있어야합니다.

 <svg>
  <mask>
    
  마스크>
</mask></svg>

태그 에서 실제 마스크 역할을하는 모양을 넣습니다. 또한 마스크 속성을 요소에 적용합니다.

 <svg>
  <mask>
    
  마스크>
  <rect mask="url (#mycleverlynamedmask)"> </rect>
</mask></svg>

마스크를 정의하거나 적용하는 유일한 방법은 아니지만이 데모에서 가장 간단한 방법입니다. 마스크를 생성하기 위해 코드를 작성하기 전에 약간의 실험을합시다.

우리는 기존 사각형의 크기와 일치하는 컷 아웃 영역을 덮고 싶다고 말했습니다. 우리가 가장 큰 요소를 취하고 이전 사각형을 마스크로 적용하면이 코드로 끝납니다.

 <svg viewbox="0 320 320">
  <mask>
    <rect width="264" height="264" y="56" fill=""> </rect>
  마스크>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#themask)"> </rect>
</mask></svg>

마스크 내부의 요소는 충전 값이 필요합니다. 그게 뭐야? 우리는 우리가 선택한 채우기 값 (색)에 따라 완전히 다른 결과를 볼 수 있습니다.

하얀 채우기

채우기에 흰색 값을 사용하면 다음을 얻습니다.

이제 우리의 큰 사각형은 마스킹 사각형과 같은 치수입니다. 우리가 원하는 것이 아닙니다.

검은 색 채우기

대신 검은 값을 사용하면 다음과 같습니다.

우리는 아무것도 보지 못합니다. 검은 색으로 채워진 것이 보이지 않기 때문입니다. 우리는 흰색과 검은 색 충전재를 사용하여 마스크의 가시성을 제어합니다. 점선은 보이지 않는 영역의 차원을 참조하기위한 시각적 원조로 있습니다.

회색 채우기

이제 흰색과 검은 색 사이에 무언가를 사용해 봅시다.

완전히 불투명하거나 견고하지도 않습니다. 투명합니다. 따라서 이제 우리는 흰색과 검은 색 값과는 다른 것을 사용하여 뒷 주머니에 보관하는 좋은 트릭을 사용하여 여기서“가시성 정도”를 제어 할 수 있다는 것을 알고 있습니다.

마지막 비트

지금까지 마스크에 대해 우리가 다루고 배운 내용은 다음과 같습니다.

  • 내부의 요소는 마스크 영역의 치수를 제어합니다.
  • 우리는 가면이있는 영역의 내용을 가시적이거나 보이지 않거나 투명하게 만들 수 있습니다.

우리는 마스크에 하나의 모양 만 사용했지만 범용 HTML 태그와 마찬가지로 원하는만큼 많은 어린이 요소를 둥지로 만들 수 있습니다. 실제로, 우리가 원하는 것을 달성하기위한 속임수는 두 개의 svg 

 <svg viewbox="0 320 320">
  <mask>
    <rect width="320" height="320" y="0" fill="???"> </rect>
    <rect width="264" height="264" y="56" fill="???"> </rect>
  마스크>
  <rect width="320" height="320" y="0" fill="#264653" mask="url (#maskw320)"> </rect>
</mask></svg>

우리의 마스킹 직사각형 중 하나는 흰색으로 가득 차 있습니다. 다른 하나는 검은 색으로 가득 차 있습니다. 규칙을 알고 있더라도 가능성을 시험해 보겠습니다.

 <mask>
  <rect width="320" height="320" y="0" fill="black"> </rect>
  <rect width="264" height="264" y="56" fill="White"> </rect>
마스크></mask>

은 가장 큰 요소의 치수이며 가장 큰 요소는 검은 색으로 채워집니다. 그것은 그 지역의 모든 것이 보이지 않다는 것을 의미합니다. 그리고 작은 사각형 아래의 모든 것이 보입니다.

이제 검은 사각형이 위에있는 곳을 뒤집어 봅시다.

 <mask>
  <rect width="320" height="320" y="0" fill="White"> </rect>
  <rect width="264" height="264" y="56" fill="black"> </rect>
마스크></mask>

이것이 우리가 원하는 것입니다!

가장 큰 흰색으로 채워진 직사각형 아래의 모든 것이 보이지만 작은 검은 사각형이 그 위에 있으며 (z 축에서 우리와 더 가깝습니다) 그 부분을 마스킹합니다.

마스크 생성

이제 우리가해야 할 일을 알았으므로 상대적으로 쉽게 마스크를 만들 수 있습니다. 그것은 우리가 처음에 컬러 직사각형을 생성하는 방법과 비슷합니다. 우리는 마스크와 두 개의 직장을 만드는 보조 루프를 만듭니다.

이번에는 REST를 SVG에 직접 추가하는 대신 마스크에 추가합니다.

 data.foreach ((d : dataSetentry, index : number) => {
  const mask : svgmaskelement = svgmaskelement = svgmaskelement ( 'mask');

  const rectdimension : number = remapdatasetvaluetosvgdimension (d. value);
  const rect : svgrecteLement = svgrectElement ( 'rect');

  rect.setattribute ( 'width',`$ {rectdimension}`);
  // ... 나머지 속성 설정 ...

  mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`);

  마스크. AppendChild (rect);

  // ... 작은 사각형의 속성을 만들고 설정 ...

  svg.appendchild (마스크);
});

data.foreach ((d : dataSetentry, index : number) => {
    // ... 색상의 사각형을 생성하는 코드 ...
});

우리는 인덱스를 마스크의 ID로 사용할 수 있지만 적어도 나에게 더 읽기 쉬운 옵션으로 보입니다.

 mask.setattribute ( 'id',`maskw $ {rectdimension.tofixed ()}`); // maskw320, masw240, ...

마스크에 더 작은 사각형을 추가 할 때, 우리는 이전에 사각형 값을 가장 높은 것에서 가장 낮은 곳에서 가장 낮게 주문했기 때문에 필요한 값에 쉽게 액세스 할 수 있습니다. 즉, 루프의 다음 요소는 작은 사각형이며, 우리가 참조 해야하는 요소입니다. 그리고 우리는 그 지수로 그렇게 할 수 있습니다.

 // ... 우리가 마스크와 사각형을 만든 이전 부분 ...

Const SmallErrectIndex = 색인 1;

// 우리가 가장 작은 사람이있을 때 다음은 없습니다.
if (data [smallerRectIndex]! == 정의되지 않은) {
  const smallerrectdimension : number = remapdatasetvaluetosvgdimension (
    데이터 [smallerRectIndex] .Value
  );
  Const SmallErrect : svgrecteLement = createSvGnSelement (
    'rect'
  ) SVGRECTELEMENT로서;

  // ... 사각형 속성 설정 ...

  마스크. AppendChild (SmallErrect);
}

svg.appendchild (마스크);

남은 것은 원래 루프의 컬러 사각형에 마스크 속성을 추가하는 것입니다. 선택한 형식과 일치해야합니다.

 rect.setattribute ( 'mask',`url (#maskw $ {rectdimension.tofixed ()}); // maskw320, maskw240, ...

최종 결과

그리고 우리는 끝났습니다! 우리는 중첩 사각형으로 만든 차트를 성공적으로 만들었습니다. 마우스 호버에서도 분리됩니다. 그리고 요소를 사용하여 각 정사각형의 컷 아웃 영역을 그리는 SVG였습니다.

위 내용은 마스크를 사용하여 중첩 사각형의 애니메이션 차트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css less html define if sort for format try math using Namespace Attribute append map number function dom this position animation everything Access Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：단일 페이지 앱이 웹을 망쳤습니까? ( "전환 앱")다음 기사：단일 페이지 앱이 웹을 망쳤습니까? ( "전환 앱")

관련 기사

더보기