SVG에 줄이 있다고 가정해 보겠습니다.
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>당신은을 사용할 수 있습니다 stroke-dasharray 대시를 만드는 CSS의 속성:
line {
stroke-dasharray: 5;
}그 5 값은 SVG의 크기를 기반으로 하는 상대 단위입니다. viewBox. 실제로 CSS 길이를 사용할 수 있습니다. 그러나 그것이 하는 일은 길이가 5단위이고 그 사이에 5단위 간격이 있는 대시 패턴을 만드는 것입니다.
여태까지는 그런대로 잘됐다. 두 번째 값이 간격 길이를 개별적으로 설정하는 두 값을 사용할 수 있습니다.
이제 대시는 5단위이고 간격은 10입니다. 세 번째 값을 시도해 보겠습니다.
여기에서 패턴을 형성하는 방법이 보이나요? 그것은 간다:
- 대시: 5개
- 간격: 10개
- 대시: 15개
당신은 그것이 똑같은 케이던스에서 그 후에 반복된다고 생각할 것입니다. 하지만! 그렇다면 대시가 서로 부딪칠 것입니다.
- 대시: 5개
- 간격: 10개
- 대시: 15개
- 대시: 5개
- 간격: 10개
- 대시: 15개
- …등등.
대신, stroke-dasharray 홀수의 값이 있으면 모두 똑똑해지고 패턴을 복제합니다. 그래서…
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;이것이 실제로 단일 값이 작동하는 이유입니다! 앞서 우리는 단일 선언 5 값. 라는 말과 정말 똑같습니다 stroke-dasharray: 5 5. 두 번째 값이 없으면 stroke-dasharray 반복 가능한 패턴을 얻기 위해 첫 번째 값을 암시적으로 복제합니다. 그렇지 않으면 길이가 5단위인 대시 실선으로 표시되지만 그 사이에는 간격이 없습니다!
패턴은 또한 모양 자체의 크기에 따라 다릅니다. SVG line 500단위입니다. 더 크게 설정하자 stroke-dasharray 값을 추가하고 다음을 수행합니다.
stroke-dasharray: 10 20 30 40 50; /* 150 units */패턴이 150번 실행되면(4단위 ⨉ 600번 반복) 총 100단위를 처리하게 됩니다. 패턴 자체가 오버플로되는 것을 방지하기 위해 추가 XNUMX개 단위가 잘립니다.
그게 다야.
