HTML5의 SVG 2D 획 및 채우기에 대한 자세한 소개

재인쇄할 소스를 표시하십시오: HTML5의 SVG 2D 획 및 채우기

채우기 색상 - 채우기 속성

이 속성은 설정된 색상을 사용하여 그래픽 내부를 채우는 데 사용됩니다. 이 속성에 색상 값을 직접 할당하면 됩니다. 예 보기:

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"  fill-opacity="0.5" stroke-opacity="0.8"/>

위의 예에서는 빨간색과 파란색 모서리가 있는 직사각형이 그려집니다. 몇 가지 사항에 유의하세요.

1. 채우기 속성이 제공되지 않으면 기본적으로 검정색 채우기가 사용됩니다. 채우기를 취소하려면 없음으로 설정해야 합니다.

2. 채우기의 투명도, 즉 채우기-불투명도를 설정할 수 있습니다. 값 범위는 0~1입니다.

테두리 색상 - 획 속성

위 예제에서는 획 속성을 사용했습니다. 이 속성은 설정된 값을 사용하여 그래픽의 테두리를 그리는 데 사용됩니다. 색상 값만 지정하면 됩니다. 참고:

1. 획 속성이 제공되지 않으면 기본적으로 그래픽 테두리가 그려지지 않습니다.

2. 가장자리의 투명도, 즉 획 불투명도를 설정할 수 있습니다. 값 범위는 0~1입니다.

사실 가장자리 상황은 그래프 내부보다 조금 더 복잡합니다. 가장자리에는 색상 외에도 정의해야 할 "모양"도 있기 때문입니다.

선의 끝점 - 획-라인캡 속성

이 속성은 선분의 끝점 스타일을 정의합니다. 이 속성은 맞대기, 정사각형 및 원형의 세 가지 값을 사용할 수 있습니다. 예를 보세요:

아아아앙

이 코드는 다양한 스타일의 선 끝점을 사용하여 3개의 선을 그립니다. 왼쪽 그림을 보면 3가지 스타일의 차이점을 쉽게 알 수 있습니다.

선 연결 - 획-라인 조인 속성

이 속성은 선분 연결 스타일을 정의합니다. 이 속성은 연귀, 원형, 경사의 세 가지 값을 사용할 수 있습니다. 예를 보세요:

아아아앙

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

선의 가상성과 견고함 - 획-점선 속성

이 속성은 선분에 사용되는 점선 또는 실선의 종류를 설정할 수 있습니다. 예를 보세요:

<svg width="160" height="140"> 
  <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>

这个属性是设置一些列数字，不过这些数字必须是逗号隔开的。属性中当然可以包含空格，但是空格不作为分隔符。每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。所以左面的例子中绘制的线是画5单位的实线，留5单位的空格，再画5单位的实线...这样一直下去。除了这些常用的属性，还有下列属性可以设置：

stroke-miterlimit：这个和canvas中的一样，它处理什么时候画和不画线连接处的miter效果。

stroke-dashoffset：这个属性设置开始画虚线的位置。

 

使用CSS展示数据

HTML5强化了p+CSS的思想，所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比，只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子：

#MyRect:hover {  
   stroke: black;  
   fill: blue;  
 }

是不是很熟悉，就是这么简单的。

以上就是HTML5中SVG 2D笔画与填充的详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！