SVG 선형 그래디언트 정의

Question

SVG 선형 그래디언트 사양에 다소 혼란 스럽습니다. 내가 45도 기울어 진 선형 그래디언트로 100x100 직사각형을 채우고 싶다고합시다. 직선적 인 방법은 x1 = 0, y1 = 0, x2 = 100 및 y2 = 100과 같은 그래디언트 포인트를 지정하는 것입니다. 그러나 x1 = 86, y1 = 0, x2 = 100, y2 = 14와 같은 점을 제공 할 때 어떤 일이 발생하는지 명확하지 않습니다. 그래디언트 벡터는 여전히 이전 벡터와 평행하지만 그래디언트 벡터 길이는 그렇지 않습니다. 경계 상자 전체를 덮으십시오. 그래서 다음과 같은 의심을 품고 있습니다.

1. 두 가지 그라디언트 정의가 동일합니까?
2. 두 번째 경우에 svg 표준은 100, 100과 같은 점에 대해 어떤 일이 발생하는지 지정합니다. 그래디언트 벡터의 외삽 된 색상을 사용합니까?
3. 나는 그라디언트가 spreadMethod이라는 속성을 가지고 있음을 알고 있지만, 문서에 따르면 그라디언트가 시작되거나 대상 사각형의 경계 내에서 끝날 때만 역할을 수행합니다. 두 번째 정의가 동일한 경우가 아니기 때문에 (시작과 끝 지점이 테두리 상자 가장자리에 있음) spreadMethod은 여전히 ​​여기서 역할을 수행합니까?

Answer 1

spec에서 문장 : 단지 그라데이션 벡터의 엔드 포인트가 대상 사각형 외부에있는 경우, 눈에 보이는 효과가없는 사실을 강조한다 "기울기 시작하면 어떻게 또는 대상 사각형의 경계 안에 끝나는 것을 나타냅니다." 그래디언트 벡터의 끝 점이 경계 상자 내부, 외부 또는 경계 상자에 상관없이 그래디언트와 그 특성은 정확히 동일하게 작동합니다. 구체적으로

:이 질문에 관련된 두 그라데이션 속성이 있습니다 spreadMethod가 reflect 또는 repeat 경우에만

• gradient vector은 그라디언트의 "크기"를 결정가. 그렇지 않으면 spreadMethod이 pad (기본값) 인 경우 그라디언트 "크기"가 경계 상자에 의해 결정됩니다. 물론 그래디언트 벡터는 항상 그래디언트의 방향을 결정합니다.
• spreadMethod 특성은 그라디언트가 반복되는지, 반복되는 방식 (첫 번째 중지 또는 마지막 중지로 다시 시작하겠습니까?)을 결정합니다. 그래디언트 벡터가 경계 상자의 크기에 "패딩"되면 반복 할 필요가 없습니다.

---

특별히 질문에 대답하려면 :

1. 을 spreadMethod이 pad 경우 : 예, 그들은 동등; 그렇지 않은 경우 : no
2. 예, 위에서 설명한대로입니다.

   을 : pad 이외로 spreadMethod 설정

3. 예

는 두 가지 효과를 가질 것이다. 그래디언트의 크기는 경계 상자에서 벡터의 크기로 줄어 듭니다.

b.여기

가 pad, repeat 및 reflect 차이의 좋은 그림 인 속성 그레디언트는 spreadMethod의 값에 따라 반복 할 것이다. 에서

: 지금 현재로 SVG Essentials/Patterns and Gradients