전에, 우리는 다양한 모양, 텍스트 및 그림을 요약하는 데 중점을 두었습니다. 다음으로, 우리는 캔버스에 대해 논의 할 때 색상 처리, 즉 충전 및 경계 효과를 요약 할 것입니다. 여기의 내용은 기본적으로 캔버스와 동일하다는 것을 알 수 있습니다. 이러한 속성은 요소로 속성으로 작성하거나 CSS에 저장 될 수 있습니다 (캔버스와 다름).
채우기 - 속성을 채우십시오 이 속성은 세트 색상을 사용하여 그림의 내부를 채 웁니다. 사용하기가 매우 간단합니다. 이 속성에 색상 값을 직접 할당하십시오. See example:<rect x = "10"y = "10"stroke = "blue"fill = "red"
fill-opacity = "0.5"Stroke-opacity = "0.8"/>
위의 예에서는 빨간색과 파란색 사각형이 그려집니다. 주목할만한 몇 가지 사항 :
1. 채우기 속성이 제공되지 않으면 기본적으로 검은 색 충전물을 사용합니다. 채우기를 취소하려면 채우기를 취소하려면 아무것도 설정하지 않아야합니다.
2. 충전의 투명성, 즉 충전 기능을 설정할 수 있으며 값 범위는 0 ~ 1입니다.
3. 약간 더 복잡한 것은 Fill-Rule 속성입니다. 이 속성은 포인트가 충전 범위에 속하는지 여부를 결정하는 알고리즘을 정의합니다. 상속 외에도 두 가지 값이 있습니다.
비존 :이 값에 사용 된 알고리즘은 모든 방향으로 판단 해야하는 지점에서 선을 방출 한 다음 그림과 선 세그먼트 사이의 교차점의 방향을 계산하는 것입니다. 계산 결과는 0에서 시작하고 교차로의 모든 라인 세그먼트는 왼쪽에서 오른쪽으로 1을 추가합니다. 교차로의 모든 라인 세그먼트는 오른쪽에서 왼쪽에서 왼쪽으로 1; 이러한 방식으로 모든 교차점을 계산 한 후,이 계산의 결과가 0과 같지 않으면 포인트는 그림에 있으며 채워야합니다. 값이 0 인 경우 그림 외부에 채울 필요가 없습니다. 다음 예를 참조하십시오. Evendd :이 값에 사용 된 알고리즘은 모든 방향으로 판단 해야하는 지점에서 선을 방출 한 다음 그림과 선 세그먼트가 교차하는 지점의 수를 계산하는 것입니다. 숫자가 홀수 인 경우 포인트는 그림으로 변경되어 채워야합니다. 숫자가 짝수 인 경우 포인트는 그림 외부에 있으며 채울 필요가 없습니다. 아래 그림의 예를 참조하십시오 : Border Color -Stroke 속성 위의 예는 스트로크 속성을 사용했습니다. 이 속성은 세트 값을 사용하여 그림의 경계를 그립니다. 색상 값을 할당하기 만하면됩니다. 알아채다:1. 스트로크 속성이 제공되지 않으면 그래프 테두리가 기본적으로 그려지지 않습니다.
2. 스트로크-능력 인 가장자리의 투명성을 설정할 수 있으며 값 범위는 0 ~ 1입니다.
실제로, 모서리의 상황은 그래프 내부보다 약간 더 복잡합니다. 색상 외에도 가장자리에는 정의해야 할 모양이 있기 때문입니다.
라인의 끝점 - 스트로크 - 린 캡 속성
이 속성은 라인 세그먼트의 끝점의 스타일을 정의합니다. 이 속성은 엉덩이, 정사각형 및 둥근 세 가지 값을 사용할 수 있습니다. See example:<SVG>
<line x1 = "40"x2 = "120"y1 = "20"y2 = "20"stroke = "black"stroke-width = "20"stroke-linecap = "butt"/>
<line x1 = "40"x2 = "120"y1 = "60"y2 = "60"stroke = "black"stroke-width = "20"stroke-linecap = "square"/>
<line x1 = "40"x2 = "120"y1 = "100"y2 = "100"stroke = "black"stroke-width = "20"stroke-linecap = "round"/>
</svg>
이 코드는 다양한 스타일의 라인 엔드 포인트를 사용하여 3 줄을 그립니다.
왼쪽 그림에서 우리는 3의 스타일 차이를 쉽게 볼 수 있습니다.
라인 연결 - 스트로크 라인 조인 속성 이 속성은 라인 세그먼트를 연결할 때 스타일을 정의합니다. 이 속성은 Miter, Round 및 Bevel 의 세 가지 값을 사용할 수 있습니다. See example:<SVG>
<polyline points = "40 60 80 20 120 60"stroke = "black"stroke-width = "20"
Stroke-linecap = "butt"fill = "Transparent"Stroke-Linejoin = "miter"/>
<polyline points = "40 140 80 100 120 140"stroke = "black"stroke-width = "20"
Stroke-Linecap = "round"fill = "Transparent"Stroke-linejoin = "round"/>
<polyline points = "40 220 80 180 120 220"stroke = "black"stroke-width = "20"
Stroke-Linecap = "square"fill = "Transparent"Stroke-linejoin = "Bevel"/>
</svg>
왼쪽 그림에서 우리는 3의 스타일 차이를 쉽게 볼 수 있습니다.
가상 및 실제 라인 - 스트로크 - 다슈어 속성
이 속성은 라인 세그먼트의 가상 및 실제 라인을 설정할 수 있습니다. See example:<SVG>
<Path D = "M 10 75 Q 50 10 100 75 T 190 75"Stroke = "Black"
Stroke-Linecap = "Round"Stroke-Dasharray = "5,10,5"Fill = "None"/>
<Path D = "M 10 75 L 190 75"Stroke = "Red"
Stroke-Linecap = "round"stroke-width = "1"Stroke-dasharray = "5,5"fill = "none"/>
</svg>
이 속성은 일부 숫자 열을 설정하지만이 숫자는 쉼표를 분리해야합니다.
물론, 공간은 속성에 포함될 수 있지만 공간은 구분 자로 사용되지 않습니다. 각 번호
실선 세그먼트의 길이는 정의되며 드로잉 순서대로 순환됩니다.
따라서 왼쪽의 예제에 그려진 선은 5 개의 유닛이있는 실선이며 5 개의 유닛이있는 공백을 남깁니다.
실선의 5 개 단위를 그립니다 ... 그리고 이렇게 계속하십시오.
일반적으로 사용되는 이러한 특성 외에도 다음 속성을 설정할 수 있습니다.
스트로크-미터 라미트 : 이것은 캔버스와 동일하며, 이는 라인이 그려 질 때와 경우의 연결에서 마이 터 효과를 처리합니다. 스트로크-산시 오프셋 :이 속성은 점선이 그려지기 시작하는 위치를 설정합니다. CSS를 사용하여 데이터를 표시하십시오 HTML5는 DIV+CSS의 아이디어를 강화 시켜서 데이터를 표시하는 부분을 처리를 위해 CSS에 양도 할 수도 있습니다. 일반적인 HTML 요소와 비교할 때, 그것은 단지 배경색이며 테두리는 충전과 스트로크로 대체됩니다. 다른 대부분은 비슷합니다. 간단한 예를 들어 봅시다 :#myrect : 호버 {
뇌졸중 : 검은 색;
채우기 : 파란색;
}
친숙하지 않습니까? 그렇게 간단합니다.
실제 참조 :스크립트 인덱스 : 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/