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

사각형의 외곽선에 stroke와 stroke-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

브라우저 호환성

BCD tables only load in the browser

같이 보기