stop-color

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.

stop-color CSS 속성은 그라디언트 내부에서 SVG <stop> 요소에 어떤 색상이 쓰일지를 정의합니다. 이 속성이 존재한다면 요소의 stop-color 속성을 덮어쓰게 됩니다.

참고 :>stop-color 속성은 <svg><stop> 요소에만 적용됩니다. 이는 다른 SVG, HTML 혹은 의사 요소에 적용되지 않습니다.

구문

css
/* <color> 값 */
stop-color: red;
stop-color: hsl(120deg 75% 25% / 60%);
stop-color: currentcolor;

/* 전역 값 */
stop-color: inherit;
stop-color: initial;
stop-color: revert;
stop-color: revert-layer;
stop-color: unset;

<color>

채우기 색상입니다. 이는 유효한 모든 CSS <color> 값에 사용될 수 있습니다.

형식 정의

초기값black
적용대상<stop> elements in <svg>
상속no
계산 값as specified
Animation typediscrete

형식 구문

Error: could not find syntax for this item

예제

SVG 그라디언트의 정지 색상 정의하기

이 예제는 stop-color 의 기본 사용법과 CSS stop-color 속성이 stop-color 의 특성보다 우선하는 방식에 대해 설명합니다.

HTML

여기 세 <rect> 사각형 SVG와 세 <linearGradient> 요소들이 있습니다. 각 그라디언트는 검은색에서부터 하얀색, 하얀색에서부터 회식으로 이루어진 네 개의 <stop> 요소를 가집니다. 차이점은 id 값 뿐입니다.

html
<svg viewBox="0 0 264 100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="myGradient1">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient2">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
    <linearGradient id="myGradient3">
      <stop offset="25%" stop-color="#000" />
      <stop offset="40%" stop-color="#fff" />
      <stop offset="60%" stop-color="#fff" />
      <stop offset="75%" stop-color="#333" />
    </linearGradient>
  </defs>
  <rect x="2" y="10" width="80" height="80" fill="url('#myGradient1')" />
  <rect x="92" y="10" width="80" height="80" fill="url('#myGradient2')" />
  <rect x="182" y="10" width="80" height="80" fill="url('#myGradient3')" />
</svg>

CSS

사각형의 외곽선에 strokestroke-width 를 포함시킵니다. 각 그라디언트의 처음과 끝 정지 색상을 설정하고, stop-color 속성을 이용하여 각각의 stop-color 특성을 덮어씁니다. 다양한 CSS <color> 구문을 확인할 수 있습니다.

css
rect {
  stroke: #333;
  stroke-width: 1px;
}

#myGradient1 {
  stop:first-of-type {
    stop-color: #66ccff;
  }
  stop:last-of-type {
    stop-color: #f4aab9;
  }
}
#myGradient2 {
  stop:first-of-type {
    stop-color: yellow;
  }
  stop:last-of-type {
    stop-color: purple;
  }
}
#myGradient3 {
  stop:first-of-type {
    stop-color: hsl(0deg 100% 50%);
  }
  stop:last-of-type {
    stop-color: hsl(20deg 100% 50%);
  }
}

결과

명세서

Specification
Scalable Vector Graphics (SVG) 2
# StopColorProperty

브라우저 호환성

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
stop-color

Legend

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

Full support
Full support

같이 보기