뇌졸중-다슈어 패턴이 작동하는 방법

SVG 라인의 stroke-dasharray 속성은 점선 효과를 생성 할 수 있습니다. 그것이 어떻게 작동하는지 봅시다.

SVG 라인이 있다고 가정합니다.

<svg><line stroke="#f8a100" x1="0" x2="500" y1="30" y2="30"></line></svg>

CSS에서 stroke-dasharray 속성을 사용하여 점선을 만들 수 있습니다.

 선 {
  뇌졸중-다셔 : 5;
}

값 5 SVG viewBox 크기를 기반으로 한 상대 단위입니다. CSS 길이 장치를 사용할 수도 있습니다. 5 개의 단위 길이 대시와 5 개의 단위 간격으로 구성된 패턴을 만듭니다.

우리는 두 값을 사용할 수 있으며, 두 번째 값은 별도로 간격 길이를 설정합니다.

 선 {
  뇌졸중-다셔 : 5 10;
}

이제 우리는 5 개의 단위 길이 대시와 10 개의 단위 간격이 있습니다. 세 가지 값을 시도해 봅시다 :

 선 {
  뇌졸중-다셔 : 5 10 15;
}

패턴을 형성하고 있음을 알 수 있습니다.

• 대시 : 5 단위
• 갭 : 10 단위
• 대시 : 15 단위

같은 속도로 반복 될 것이라고 생각할 수도 있습니다. 하지만 아니요! 이 경우 대시 라인이 서로 충돌합니다.

• 대시 : 5 단위
• 갭 : 10 단위
• 대시 : 15 단위
• 대시 : 5 단위
• 갭 : 10 단위
• 대시 : 15 단위
• ...등.

대신, 값 수가 홀수 인 경우 stroke-dasharray 패턴을 지능적으로 반복합니다. 그래서:

 뇌졸중-다셔 : 5 10 15;

/ *는 */와 같습니다.
뇌졸중-나시 아라레이 : 5 10 15 5 10 15;

이것은 실제로 단일 가치가 작동하는 이유를 설명합니다! 전에는 단일 값을 5 로 선언했습니다. 이것은 실제로 stroke-dasharray: 5 5 . 두 번째 값이없는 경우, stroke-dasharray 첫 번째 값을 암시 적으로 복사하여 반복 가능한 패턴을 얻습니다. 그렇지 않으면, 대시 사이에 간격이없는 5 개의 단위 길이의 대시로 구성된 실선 일뿐입니다!

패턴은 또한 모양 자체의 크기에 따라 다릅니다. 우리의 SVG 라인은 500 단위입니다. 더 큰 stroke-dasharray 값을 설정하고 추가하겠습니다.

 뇌졸중-도시 : 10 20 30 40 50;* 150 단위* /

모드가 4 배 (150 단위 × 4 반복)가 실행되면 총 600 대를 처리합니다. 패턴 자체가 넘치지 않도록 여분의 100 단위는 잘릴 것입니다.

그게 다야.

이것을 지적 해 준 Joshua Dance에게 감사합니다!

위 내용은 뇌졸중-다슈어 패턴이 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!