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 January 2020.

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

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

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

예제

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>

사용 일람

none | <dasharray>
기본 값 none
애니메이션 적용 Yes
<dasharray>

점선과 간격의 길이를 지정하는 쉼표 혹은 공백은 <length><percentage>의 목록입니다.

홀수 개의 값이 제공된다면 값 목록이 짝수 개의 값을 얻기 위해 반복됩니다. 그러므로 5,3,25,3,2,5,3,2 과 동일합니다.

명세서

Specification
Scalable Vector Graphics (SVG) 2
# StrokeDashing

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
stroke-dasharray

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기