HTML5의 SVG 2D 소개 5- 색상 표현 및 정의 방법

저자：Eve Cole 업데이트 시간：2025-04-11 04:00:03

SVG 및 Canvas는 동일하며 표준 HTML/CSS 색상 표현 방법을 사용하며 이러한 색상은 채우기 및 스트로크 속성에 사용할 수 있습니다.

기본적으로 색상을 정의하는 방법은 다음과 같습니다 .

1. 색상 이름 : 색상 이름 빨간색, 파란색, 검은 색 ...

2. RGBA/RGB 값 : 예를 들어 #FF0000, RGBA (255,100,100,0.5)와 같은 이해하기 쉽습니다.

3. 16 진수 값 : #ffffff와 같은 16 진수로 정의 된 색상.

4. 그라디언트 값 : 캔버스와 동일하며, 선형 구배 및 링 그라디언트의 두 그라디언트 색상을 지원합니다. 아래 그림과 같이 :

5. 패턴 충전 : 사용자 정의 패턴을 채우기 색상으로 사용하십시오.

처음 몇 개는 매우 간단합니다. 다음 두 가지의 두 개의 채우기 색상에 중점을 두겠습니다.

선형 구배

선형 구배는 선형 구배를 정의하는 데 사용될 수 있으며 각 구배 색상 구성 요소는 정지 요소를 사용하여 정의됩니다. 다음 예를 참조하십시오.

<SVG>

<defs>

<정지 오프셋 = "0%"/>

<정지 오프셋 = "50%"/>

<오프셋 중지 = "100%"/>

</lineargradient>

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "50%"stop-color = "black"stop-opacity = "0"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</lineargradient>

<스타일 유형 = "text/css"> <! [cdata [

#rect1 {fill : url (#gradient1); }

.Stop1 {stop-color : 빨간색; }

.Stop2 {stop-color : 검은 색; 정지 기능 : 0; }

.Stop3 {STOP-COLOR : 파란색; }

]]>

</스타일>

</defs>

</svg>

이 예에서는 다음과 같이하십시오 .

1. 그라디언트 컬러 요소는 DEFS 요소에 배치해야합니다.

2. 그라디언트 요소의 ID 값을 설정해야합니다. 그렇지 않으면 다른 요소는이 그라데이션을 사용할 수 없습니다.

3. 그라디언트 컬러 부재는 정지를 사용하여 정의되며, 그 특성은 CSS를 사용하여 정의 할 수 있습니다. 표준 HTML에서 지원하는 클래스 및 ID와 같은 속성을 지원합니다. 다른 일반적인 속성은 다음과 같습니다 .

오프셋 속성 : 이것은 멤버 색상의 동작 범위를 정의 하며이 속성의 값은 0% ~ 100% (또는 0 ~ 1)입니다. 일반적으로 첫 번째 색상은 0%로 설정되고 마지막 색상은 100%로 설정됩니다.

스톱 컬러 속성 : 이것은 멤버 색상의 색상을 정의하는 매우 간단합니다.

스톱 옵션 속성 : 멤버 색상의 투명성을 정의합니다.

x1, y1, x2, y2 속성 :이 두 지점은 그라디언트의 방향을 정의합니다. 기본적으로 쓰지 않으면 수평 구배입니다. 위의 예에서는 수직 구배가 생성됩니다.

4. 예제에 표시된대로 그라디언트 색상 사용 URL (#ID) 형태로 채우거나 스트로크 할 값을 할당하십시오.

5. 그라디언트 멤버의 재사용 : Xlink : HREF를 사용하여 정의 된 그라디언트 멤버를 참조 할 수 있으므로 위의 예는 다음과 같이 다시 작성할 수 있습니다.

<정지 오프셋 = "0%"/>

<정지 오프셋 = "50%"/>

<오프셋 중지 = "100%"/>

</lineargradient>

링 그라디언트

방사형 그라디언트 요소를 사용하여 링 구배를 정의하거나 정지를 사용하여 멤버 색상을 정의하십시오. See example:

<SVG>

<defs>

<방사형 Gradient id = "gradient3">

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</radialgradient>

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</radialgradient>

</defs>

</svg>

위의 예에서 요소 이름 및 일부 특수 멤버를 제외한 다른 모든 것은 정지 정의를 포함하여 선형 그라디언트와 동일합니다. 정지 정의를 포함하여 DEFS에 배치해야합니다. ID로 설정해야합니다. URL (#ID)을 사용하여 값을 할당해야합니다. 이러한 특수 멤버는 다음과 같습니다.

오프셋 속성 : 이것은 선형 구배 값과 동일하지만 의미는 다릅니다. 링 그라디언트에서 0%는 원의 중심을 나타내며 이해하기 쉽습니다.

CX, CY, R 속성 : 실제로 이해하기 쉽습니다. 반지는 점진적입니다. 물론 링의 중심과 반경을 정의해야합니다. 위의 예에서 원의 크기와 위치를 이해할 수 있습니다.

FX, FY 속성 : 색상 (초점)의 중심에서 위치를 정의합니다. 위의 예에서, 가장 붉은 붉은 색은 원의 중심이며, 이는 기본 효과입니다. 변경하려면 FX, FY 좌표 값을 설정할 수 있습니다.

그러나 위의 CX, CY, R, FX, FY의 값에주의를 기울여야합니다. 당신은 그것들이 모두 소마임을 알게 될 것입니다. 그래서 단위는 무엇입니까?

이를 위해서는 다른 관련 속성 인 Gradientunits를 먼저 이해해야합니다. 그라디언트 는 그라디언트 색상을 정의하는 데 사용되는 좌표 단위를 정의합니다. 이 속성에는 사용 가능한 두 가지 값의 값이 있습니다 : UserspaceOnuse 및 ObjectBoundingbox.

ObjectBoundingbox 는 기본값입니다. 그것이 사용하는 좌표는 객체를 둘러싸는 상자와 관련이 있으며 (정사각형 포함 상자가 아닌 경우는 더 복잡하고, 건너 뜁니다) 값 범위는 0 ~ 1입니다. 예를 들어, 위의 예에서 CX와 CY의 좌표 값 (0.25, 0.25). 이는 원의 중심이 인클로저 박스의 왼쪽 상단 모서리의 1/4이고 반경 0.25는 그림에서 볼 수 있듯이 반경이 물체 제곱 인클로저 상자의 길이의 1/4임을 의미합니다.

UsersPaceOnuse는 절대 좌표가 사용됨을 의미합니다. 이 설정을 사용하는 경우 그라디언트 색상과 채우기 객체를 동일한 위치에 유지해야합니다.

다음 예를보십시오. 그라디언트 속성의 기본값은 ObjectBoundingBox입니다.

<SVG>

<defs>

<방사형 학년 ID = "gradient5"

CX = "0.5"CY = "0.5"r = "0.5"FX = "0.25"FY = "0.25">

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</radialgradient>

</defs>

<rect x = "10"y = "10"rx = "15"ry = "15"

fill = "url (#gradient5)"stroke = "black"stroke-width = "2"/>

</svg>

렌더링을 보면 초점의 의미를 알게 될 것입니다.

또한, 그라디언트 컬러 요소와 GradientTransform 과 같은 일부 변환 특성이 있으며 여기에는 초점이 아니며 변환은 나중에 요약됩니다.

사용되는 또 다른 가능한 속성은 스프레드 메드 속성으로, 그라디언트 색상이 종점에 도달 할 때 취해야 할 동작을 정의합니다. 이 속성에는 3 가지 선택적 값이 있습니다 : PAD (기본값), 반사, 반복. 말할 것도없이, Pad는 자연스러운 전환입니다. 그라디언트 색상이 끝나면 마지막 멤버 색상을 사용하여 객체의 나머지 부분을 직접 렌더링하십시오. Refect는 그라디언트 색상을 계속 만들지 만 마지막 색상에서 첫 번째 색상으로 시작하여 그라디언트 색상이 계속 반대로 렌더링됩니다. 그라디언트 컬러 엔드 포인트에 다시 도달하면 순서를 뒤집어 객체가 이런 식으로 채워집니다. 반복하면 그라디언트 색상이 렌더링을 계속할 수 있지만 반전되지 않으며 첫 번째 색상에서 마지막 색상으로 계속해서 렌더링됩니다. 렌더링은 다음과 같습니다.

반복적으로 렌더링하는 코드를보십시오.

<SVG>

<defs>

<방사형 학년 ID = "그라디언트"

cx = "0.5"cy = "0.5"r = "0.25"fx = ". 25"fy = ". 25"

SpreadMethod = "반복">

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</radialgradient>

</defs>

<rect x = "50"y = "50"rx = "15"ry = "15"

fill = "url (#gradient)"/>

</svg>

텍스처 채우기

텍스처 충전은 또한 인기있는 채우기 방법입니다. SVG에서는 패턴을 사용하여 텍스처를 만들고이 패턴을 사용하여 다른 객체를 채울 수 있습니다. 예제를 직접 살펴 보겠습니다.

<SVG>

<defs>

<정지 오프셋 = "0%"stop-color = "화이트"/>

<정지 오프셋 = "100%"stop-color = "blue"/>

</lineargradient>

<정지 오프셋 = "0%"stop-color = "red"/>

<정지 오프셋 = "100%"stop-color = "Orange"/>

</lineargradient>

</defs>

<defs>

</패턴>

</defs>

</svg>

예제는 단순 해 보이고 그라디언트 색상에서 패턴을 만들고 패턴을 사용합니다.

사각형을 채우십시오. 참고 :

1. 다른 브라우저 에서이 패턴을 채울 때 효과가 다릅니다.

예를 들어, 예제는 Firefix 및 Chrome에서 동일하게 작동합니다. 그러나 그라디언트 색상을 만드는 경우

패턴이 동일한 DEFS 조합으로 정의되면 Firefox는 여전히 정상적으로 렌더링 할 수 있습니다.

그러나 Chrome은 그라디언트 색상을 인식 할 수 없으며 기본 검은 색으로 만 채워집니다.

2. 패턴도 ID를 정의해야합니다.

3. 패턴은 DEFS에서도 정의되어야합니다.

4. 패턴 사용은 또한 채우거나 뇌졸중에 URL (#ID)을 직접 할당하는 것입니다.

위는 모두 매우 간단합니다. 예제의 좌표 표현에 중점을 두겠습니다. 좌표는 패턴이 더 복잡합니다.

패턴에는 두 가지 관련 특성이 포함되어 있습니다 : PatternUnits 및 PatternContentUnits 속성; 두 속성 모두 여전히 객체 바운드 박스와 UserspaceOnuse의 두 가지 값 만 있습니다. 이 두 값의 의미는 위에서 논의되었습니다. 여기서 혼동하기 쉬운 것은이 두 속성의 기본값이 다르다는 것입니다. 그러나이 작업을 수행하는 이유를 이해하면이 작업을 수행하는 것이 의미가 있음을 알게 될 것입니다.

1. Patternunits 속성

이 속성은 그라디언트의 그라디언트 속성과 동일하며 ObjectBoundingbox는 기본적으로 사용됩니다. 이 속성의 영향을받는 속성은 x, y, 너비 및 높이입니다. 이 네 가지 속성은 각각 패턴의 출발점과 폭을 정의합니다. 둘 다 상대 값을 사용하고, 예에서는 수평 및 수직 방향을 4 번 채우고 싶어서 너비와 높이 모두 0.25로 설정됩니다.

2. PatternContentUnits 속성

이 속성의 기본값은 userspaceonuse를 사용하여 정확히 반대입니다. 이 속성은 패턴으로 그린 모양의 좌표계 (예 : rect, circe)를 설명합니다. 즉, 기본적으로 패턴에서 그리는 모양은 다른 좌표계와 패턴 자체의 크기/위치를 사용합니다. 위의 예제의 사례를 고려할 때 200*200의 사각형을 채우고 각 방향을 4 번 반복하려고합니다. 이것은 각 패턴이 50*50이므로 패턴 내부의 두 개의 사각형과 원 이이 50*50 사각형으로 그려집니다. 이런 식으로, 우리는 위의 패턴에서 사각형과 원의 좌표를 이해할 수 있습니다. 또한이 예제의 패턴을 중심으로하려면 렌더링하기 전에 10px로 오프셋해야합니다. 이 값은 PatternUnits 속성에 의해 제한되므로 기본적으로 x 및 y 값은 다음과 같습니다. 10/200 = 0.05.

그렇다면 왜 패턴이 이와 같은 두 속성의 기본값을 설정합니까?

이것은 사용자의 사용에 의해 결정됩니다 (위의 예에서 논의) :

첫 번째 패턴 스타일 : 이것이 대부분의 상황이라고 생각하므로 기본값으로 처리됩니다. 외부 그래프가 스케일링 될 때 패턴이 늘어납니다. 외부 정사각형이 아무리 큰지에 관계없이 패턴은 항상 양방향으로 4 번 채워집니다. 그러나 패턴에 포함 된 그래픽은 외부로 채워진 사각형이 스케일링되면 늘어나지 않습니다. 그것이 멀리 가져 왔지만 이해하십시오.

두 번째 패턴 스타일 : 패턴의 모양은 외부 가장자리의 모양이 스케일링되면 늘어납니다. 또한이 효과를 달성하기 위해 PatternContentUnits 속성의 값을 ObjectBoundingBox로 설정할 수도 있습니다. 예를 들어, 패턴 부분을 다음과 같이 수정하십시오.

<circle cx = "

</패턴>

수정 후, 채워진 사각형의 크기를 변경할 때 패턴의 모양도 늘어납니다. 수정 후 주변 물체의 좌표로 변경되므로 패턴의 X 및 Y 좌표가 더 이상 필요하지 않습니다. 패턴은 항상 채워진 모양에 맞게 조정됩니다.

세 번째 패턴 스타일 : 패턴의 모양과 크기는 고정되어 있습니다. 주변 객체가 어떻게 조정 되더라도 좌표계를 사용자 paceonuse로 변경 하여이 효과를 달성 할 수 있습니다. 코드는 다음과 같습니다.

</패턴>

이 3의 일반적인 패턴은 다음 그림에 나와 있습니다.

실제 참조 :

공식 문서 : http://www.w3.org/tr/svg11/

스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

개발 센터 : https://developer.mozilla.org/en/svg

인기있는 참조 : http://www.chinasvg.com/