本文概述
SVG支持多种笔划属性。这些如下：
stroke
它用于定义任何元素的文本, 线条或轮廓的颜色。
例子
<!DOCTYPE html>
<html>
<title>SVG Stroke Example</title>
<body>
<h1>SVG Stroke</h1>
<svg width="500" height="500">
<g>
<text x="30" y="30" >Using stroke: </text>
<path stroke="blue" d="M 50 50 L 300 50" />
<path stroke="orange" d="M 50 70 L 300 70" />
<path stroke="red" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>立即测试
stroke-width
它用于定义任何元素的文本, 线条或轮廓的粗细。
例子
<!DOCTYPE html>
<html>
<title>SVG Stroke Example</title>
<body>
<h1>SVG Stroke</h1>
<svg width="800" height="800">
<text x="30" y="10" >Using stroke-width: </text>
<path stroke-width="2" stroke="blue" d="M 50 50 L 300 50" />
<path stroke-width="4" stroke="orange" d="M 50 70 L 300 70" />
<path stroke-width="6" stroke="red" d="M 50 90 L 300 90" />
</svg>
</body>
</html>立即测试
stroke-linecap
它用于定义线的结尾或任何路径的轮廓的不同类型。
例子
<!DOCTYPE html>
<html>
<title>SVG Stroke Example</title>
<body>
<h1>SVG Stroke</h1>
<svg width="900" height="900">
<g>
<text x="30" y="30" >Using stroke-linecap: </text>
<path stroke-linecap="square" stroke-width="7"
stroke="blue" d="M 50 50 L 300 50" />
<path stroke-linecap="round" stroke-width="7"
stroke="orange" d="M 50 70 L 300 70" />
<path stroke-linecap="butt" stroke-width="7"
stroke="red" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>立即测试
stroke-dasharray
它用于创建虚线。
例子
<!DOCTYPE html>
<html>
<title>SVG Stroke Example</title>
<body>
<h1>SVG Stroke</h1>
<svg width="900" height="900">
<g>
<text x="30" y="30" >Using stroke-dasharray: </text>
<path stroke-dasharray="5, 5" stroke-width="6"
stroke="blue" d="M 50 50 L 300 50" />
<path stroke-dasharray="10, 10" stroke-width="6"
stroke="orange" d="M 50 70 L 300 70" />
<path stroke-dasharray="20, 10, 5, 5, 5, 10" stroke-width="6"
stroke="red" d="M 50 90 L 300 90" />
</g>
</svg>
</body>
</html>立即测试
