[Tips] line-dasharray, stroke-dasharray 제대로 알기

MapBox를 사용하는 프로젝트를 진행하고 있는 도중 맵박스 위에 점선을 표현하는 기능이 있어 개발했었습니다.
개발 이후 현재까지 잘 사용하고 있었는데 ios 버전 업그레이드 이후 맵 초기화 부분에서 알수 없는 오류로 인해 문제가 발생했지만 관련된 그 어떤 글도 확인할 수 없어 난감했었네요.

문제가 발생하는 코드를 하나씩 확인해 나가면서 MapBox의 초기화 과정에서 문제가 발생한것을 확인하고 원인을 찾던과정에서 아래와 같이 두가지 문제가 있는것을 확인했습니다.
 1. line-dasharray의 Parsing 오류

mapController?.addLayer(
    MAP_LINE_SOURCE_DASH,
    MAP_LINE_LAYER_DASH,
    LineLayerProperties(
      lineColor: Colors.white.toHexStringRGB(),
      lineCap: "round",
      lineJoin: "round",
      lineWidth: 2,
      lineDasharray: [Expressions.literal, [3, 3]],  // << 문제 발생
    ),
  );

 2. line-gradient Parsing 오류 (수정됨) 
  -> 해당 오류는 ' <<와  " << 를 혼용해서 사용하는 바람에 발생된 문제로 보이네요. 'linear'와 '#FF00FF' 를 "linear"와 "#FF00FF"로 변경해서 문제 해결했습니다 :)

  await mapController?.addLayer(
    MAP_LINE_SOURCE,
    MAP_LINE_LAYER,
    LineLayerProperties(
      lineColor: const Color(0xFFFF00FF).toHexStringRGB(),
      lineCap: "round",
      lineJoin: "round",
      lineWidth: 9,
      lineGradient: [  // << 문제발생
        Expressions.interpolate,
        ['linear'],
        [Expressions.lineProgress],
        0, '#FF00FF',
        1, "#FFFF00",
      ],
    ),
  );

그러는 중에 line-dasharray에 대해서 좀 더 알게된 내용이 있어 정리해보려고 합니다.

line-dasharray(mapbox) 와 stroke-dasharray(css) 는 점선을 표현하는 방식이죠.
지금까지는 막연히 사용만 했는데 규칙이 별거 없더라고요.

* stroke-dasharray 예제와 결과 이미지
 case1. dash와 gap이 없는 선
 case2. "4" 홀수로 선언되어 있음 - dash4 gap4 반복
 case3. "4 1" 짝수로 선언되어 있음 - dash4 gap1 반복
 case4. "4 1 2" 홀수로 선언되어 있음 - dash4 gap1 dash2 gap4 dash2 gap1 반복
 case5. "4 1 2 3" 짝수로 선언되어 있음 - dash4 gap1 dash2 gap3 반복
 case6. "0 4 0" 홀수로 선언되어 있음 - gap으로 시작되는 "4"
 case7. "0 4 2 0" 짝수로 선언되어 있음 - gap으로 시작되는 "4 2"

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- case1. No dashes nor gaps -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- case2. Dashes and gaps of the same size -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- case3. Dashes and gaps of different sizes -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- case4. Dashes and gaps of various sizes with an odd number of values -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- case5. Dashes and gaps of various sizes with an even number of values -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- case6. Dashes starting with a gap -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />

  <!-- case7. Dashes and gaps of various sizes with an even number of values starting with a gap -->
  <line x1="0" y1="13" x2="30" y2="13" stroke-dasharray="0 4 2 0" />
</svg>

 # 위의 예제를 보면 알겠지만 홀수로 선언되어 있는 부분은 한번더 추가해서 짝수와 같이 선언된 결과와 같습니다. #

이 내용만 알면 html, css, mapbox 모두 점선을 표현하는데 있어서 문제 없겠죠? 
아래 링크에서 직접 테스트 해보면서 원하는 모양의 점선을 만들어봐요.

 * 직접 테스트 해보기: 링크

---

* 참고 사이트
- SVG stroke-dasharray : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray