SVG - 描边_SVG 菜鸟教程

SVG 支持多个描边属性。

以下是使用的主要笔触属性。

笔画类型	描述
stroke	定义任何元素的文本、线条或轮廓的颜色。
stroke-width	定义任何元素的文本、线条或轮廓的粗细。
stroke-linecap	定义线条的不同类型的结尾或任何路径的轮廓。
stroke-dasharray	用于创建虚线。

例

testSVG.htm

<html>
	 	<title>SVG Stroke</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="150">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="30" >Using stroke: </text>
	 	 	 	 	 	 <path stroke="red" d="M 50 50 L 300 50" />
	 	 	 	 	 	 <path stroke="green" d="M 50 70 L 300 70" />
	 	 	 	 	 	 <path stroke="blue" d="M 50 90 L 300 90" />
	 	 	 	 	</g>	
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

描边宽度

<html>
	 	<title>SVG Stroke</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="150">
	 	 	 	 	<text x="30" y="10" >Using stroke-width: </text>
	 	 	 	 	<path stroke-width="2" stroke="black" d="M 50 50 L 300 50" />
	 	 	 	 	<path stroke-width="4" stroke="black" d="M 50 70 L 300 70" />
	 	 	 	 	<path stroke-width="6" stroke="black" d="M 50 90 L 300 90" />
	 	 	 </svg>
	 	 		
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

stroke-linecap （笔画线帽）

<html>
	 	<title>SVG Stroke</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="150">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="30" >Using stroke-linecap: </text>
	 	 	 	 	
	 	 	 	 	 	 <path stroke-linecap="butt" stroke-width="6"	
	 	 	 	 	 	 stroke="black" d="M 50 50 L 300 50" />
	 	 	 	 	
	 	 	 	 	 	 <path stroke-linecap="round" stroke-width="6"	
	 	 	 	 	 	 stroke="black" d="M 50 70 L 300 70" />
	 	 	 	 	
	 	 	 	 	 	 <path stroke-linecap="square" stroke-width="6"
	 	 	 	 	 	 stroke="black" d="M 50 90 L 300 90" />
	 	 	 	 	</g>
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

stroke-dash数组

<html>
	 	<title>SVG Stroke</title>
	 	<body>
	 	 		
	 	 	 <svg width="800" height="150">
	 	 	 	 	<g>
	 	 	 	 	 	 <text x="30" y="30" >Using stroke-dasharray: </text>
	 	 	 	 	 		
	 	 	 	 	 	 <path stroke-dasharray="5,5" stroke-width="6"	
	 	 	 	 	 	 stroke="black" d="M 50 50 L 300 50" />
	 	 	 	 	 		
	 	 	 	 	 	 <path stroke-dasharray="10,10" stroke-width="6"	
	 	 	 	 	 	 stroke="black" d="M 50 70 L 300 70" />
	 	 	 	 	 		
	 	 	 	 	 	 <path stroke-dasharray="20,10,5,5,5,10" stroke-width="6"	
	 	 	 	 	 	 stroke="black" d="M 50 90 L 300 90" />
	 	 	 	 	</g>
	 	 	 </svg>
	 	
	 	</body>
</html>

输出

在 Chrome Web 浏览器中打开 textSVG.htm。您可以使用 Chrome/Firefox/Opera 直接查看 SVG 图像，无需任何插件。Internet Explorer 9 及更高版本还支持 SVG 图像渲染。

<< SVG - 文本 SVG - 滤镜 >>