stroke-dasharray

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020년 3월⁩.

stroke-dasharray 은 도형의 외곽선을 구성하는 점선과 간격의 패턴을 정의하는 특성입니다.

참고 : 특성을 나타내기 위해 stroke-dasharray 는 CSS 속성으로도 사용될 수 있습니다. 자세한 정보는 stroke-dasharray 를 확인하세요.

이 특성은 아래 SVG 요소와 함께 사용할 수 있습니다.

예제

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 30 12" xmlns="http://www.w3.org/2000/svg">
  <style>
    line {
      stroke: black;
    }
  </style>
  <!-- 점선과 간격 모두 없습니다. -->
  <line x1="0" y1="1" x2="30" y2="1" />

  <!-- 점선과 간격이 같은 크기를 가집니다. -->
  <line x1="0" y1="3" x2="30" y2="3" stroke-dasharray="4" />

  <!-- 점선과 간격이 다른 크기를 가집니다. -->
  <line x1="0" y1="5" x2="30" y2="5" stroke-dasharray="4 1" />

  <!-- 점선과 간격이 다양한 크기의 홀수 개의 숫자값을 가집니다.  -->
  <line x1="0" y1="7" x2="30" y2="7" stroke-dasharray="4 1 2" />

  <!-- 점선과 간격이 다양한 크기의 짝수 개의 숫자값을 가집니다.  -->
  <line x1="0" y1="9" x2="30" y2="9" stroke-dasharray="4 1 2 3" />

  <!-- 점선이 간격을 두고 시작합니다. -->
  <line x1="0" y1="11" x2="30" y2="11" stroke-dasharray="0 4 0" />
</svg>