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월.

Learn more
See full compatibility

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>

[フレーム]