HTML5 SVG 2D 소개 4 - 획 및 채우기_html5 튜토리얼 기술

앞서 다양한 모양, 텍스트, 그림을 요약하는 데 중점을 두었습니다. 다음으로 캔버스에 대해 논의한 것처럼 색상 처리, 즉 채우기 및 테두리 효과를 요약하겠습니다. 캔버스처럼요. 이러한 속성은 요소에 속성으로 작성되거나 CSS에 저장될 수 있습니다(캔버스와는 다릅니다).
채우기 색상 - 채우기 속성
이 속성은 설정된 색상을 사용하여 그래픽 내부를 채우는 데 사용하는 것이 매우 간단합니다. 이 속성을 직접적으로 확인하세요. 예를 보세요:

코드 복사

코드는 다음과 같습니다.

fill-opacity="0.5" 스트로크-불투명도="0.8" />

위의 예에서는 빨간색과 파란색 모서리가 있는 직사각형이 그려집니다. 몇 가지 주의사항:
1. fill 속성이 제공되지 않으면 기본적으로 검정색 채우기가 사용됩니다. 채우기를 취소하려면 없음으로 설정해야 합니다.
2. 채우기 투명도를 채우기 불투명도로 설정할 수 있습니다. 값 범위는 0~1입니다.
3. 좀 더 복잡한 것은 채우기 규칙 속성입니다. 이 속성은 상속 값 외에도 포인트가 채우기 범위에 속하는지 여부를 판단하는 알고리즘을 정의합니다. 0이 아닌: 이 값에 사용되는 알고리즘은 다음과 같습니다. 임의의 방향으로 결정하려는 점에서 선을 시작한 다음 그래프와 선분의 교차 방향을 계산합니다. 결과는 0부터 시작하며, 모든 교차점의 선분이 왼쪽에서 오른쪽이면 선분이 오른쪽에서 왼쪽인 각 교차점에 대해 1을 더하고 모든 교차점을 계산한 후 1을 줄입니다. 이 계산 결과가 0이 아닌 경우 해당 점이 그래픽 내에 있으면 채워야 하며, 값이 0이면 그래픽 외부에 있으므로 채울 필요가 없습니다. 아래 예를 살펴보세요.

evenodd: 이 값에 사용되는 알고리즘은 모든 방향에서 결정될 점에서 선을 시작한 다음 그래프와 선분 사이의 교차점 수를 계산하는 것입니다. 홀수인 경우 그래프 내의 점을 변경해야 합니다. 숫자가 짝수인 경우 점은 그래픽 외부에 있으므로 채울 필요가 없습니다. 아래 예를 살펴보세요.

테두리 색상 - 획 속성
위 예시에서는 획 속성을 사용하여 그래픽의 테두리를 그립니다. 사용하기도 매우 간단합니다. 색상 값을 할당하기만 하면 됩니다. 참고:
1. 획 속성이 제공되지 않으면 기본적으로 그래픽 테두리가 그려지지 않습니다.
2. 가장자리의 투명도를 획 불투명도로 설정할 수 있습니다. 값 범위는 0~1입니다.
실제로 가장자리 상황은 그래프 내부보다 조금 더 복잡합니다. 왜냐하면 가장자리에는 색상 외에도 정의해야 할 "모양"도 있기 때문입니다.

선의 끝점 - 스트로크-라인캡 속성
이 속성은 선분의 끝점 스타일을 정의합니다. 이 속성은 을 사용할 수 있습니다. 엉덩이, 정사각형, 원형 ​​세 가지 값. 예를 보세요:

코드 복사

코드는 다음과 같습니다.

이 코드는 서로 다른 스타일 선 끝점을 사용하여 3개의 선을 그립니다.

왼쪽 사진을 보면 3가지 스타일의 차이점을 쉽게 알 수 있습니다.

선 연결 - 획-라인 조인 속성
이 속성은 선분 연결 스타일을 정의합니다. 이 속성은 마이터, 라운드, 경사 값을 사용할 수 있습니다. . 예를 보세요:

코드 복사

코드는 다음과 같습니다.

<폴리라인 포인트="40 60 80 20 120 60" 스트로크="검정색" 스트로크-너비="20"
스트로크-라인캡="butt" 채우기="투명" 스트로크-라인조인="마이터"/>

<폴리라인 포인트="40 140 80 100 120 140" 스트로크="블랙" 스트로크- width="20"
스트로크-라인캡="라운드" 채우기="투명" 스트로크-라인조인="라운드"/>

<폴리라인 포인트="40 220 80 180 120 220" 스트로크 ="black" 스트로크-너비="20"
스트로크-라인캡="제곱" 채우기="투명" 스트로크-라인조인="베벨"/>

왼쪽 사진을 보면 3가지 스타일의 차이점을 쉽게 알 수 있습니다.

가상선과 실선 - 획-다샤레이 속성
이 속성은 선분에 사용되는 가상선과 실선을 설정할 수 있습니다. 예를 보세요:

코드 복사

코드는 다음과 같습니다.

스트로크-라인캡="라운드 " 뇌졸중-dasharray=" 5,10,5" fill="none"/>
스트로크-라인캡="라운드 " 스트로크 너비=" 1" 스트로크-dasharray="5,5" 채우기="없음"/>

이 속성은 일련의 숫자를 설정하지만 이러한 숫자는 쉼표로 구분되어야 합니다.

속성에는 물론 공백이 포함될 수 있지만 공백은 구분 기호 역할을 하지 않습니다. 각 번호

은 그리는 순서가 아닌 그리는 순서대로 순환되는 실선 세그먼트의 길이를 정의합니다.

그래서 왼쪽 예시에서 그린 선은 5유닛의 실선이 되어 5유닛의 공간이 남게 되는데,

실선을 5개 더 그리고...이렇게 계속하세요.

일반적으로 사용되는 속성 외에도 다음과 같은 속성을 설정할 수 있습니다.
Stroke-miterlimit: 이는 캔버스에서 마이터 효과를 처리하는 것과 동일합니다. 선을 그릴 때와 그리지 않을 때의 연결.
Stroke-dashoffset: 이 속성은 점선이 그려지기 시작하는 위치를 설정합니다.

CSS를 사용하여 데이터 표시
HTML5는 DIV CSS의 개념을 강화하므로 데이터 표시 부분도 CSS에 맡길 수 있습니다. 일반적인 HTML 요소와 비교하면 배경색과 테두리가 채우기와 획으로 대체된다는 점만 다를 뿐입니다. 대부분의 다른 사람들은 거의 동일합니다. 간단한 예를 들어보겠습니다.

코드 복사

코드는 다음과 같습니다.

#MyRect:hover {
획: 검정;
채우기: 파랑;
}

정말 간단하지 않나요?

실용 참조:
스크립트 색인: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
개발 센터: https://developer.mozilla.org/en/SVG
인기 참고 자료: http://www.chinasvg.com/
공식 문서: http://www.w3.org/TR/SVG11/