SVG Stroking
SVG Stroking （SVG抚摸）
Description of the stroke properties
Description of the stroke properties （笔画属性描述）
SVG offers different stroke properties that can be applied to any kind of text, lines and outlines of elements. They allow controlling various aspects of a stroke. Here are some stroke properties: （SVG提供可应用于任何类型的文本、线条和元素轮廓的不同笔画属性。它们允许控制中风的各个方面。以下是一些笔画属性：）
stroke for specifying the color of a line, outline or text of an element, （-用于指定元素的线条、轮廓或文本的颜色的描边，）
stroke-linecap for specifying how the endings of an SVG line are rendered, （- stroke-linecap用于指定SVG行的结尾是如何渲染的，）
stroke-width for specifying the thickness of a line, outline, or text of an element, （-描边宽度，用于指定元素的线条、轮廓或文本的粗细，）
stroke-dasharray for specifying dashed lines. （-用于指定虚线的stroke-dasharray。）
Example of the stroke property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100" >
<g fill="none">
<path stroke="purple" d="M5 30 l215 0" />
<path stroke="lightgreen" d="M5 60 l215 0" />
<path stroke="pink" d="M5 90 l215 0" />
</g>
Sorry, your browser doesn't support inline SVG.
（抱歉，您的浏览器不支持内联SVG。）
</svg>
</body>
</html>
Example of the stroke-linecap property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightblue" stroke-width="10">
<path stroke-linecap="butt" d="M5 30 l215 0" />
<path stroke-linecap="round" d="M5 60 l215 0" />
<path stroke-linecap="square" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>
Example of the stroke-width property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="lightgreen">
<path stroke-width="3" d="M5 30 l215 0" />
<path stroke-width="5" d="M5 60 l215 0" />
<path stroke-width="7" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>
Example of the stroke-dasharray property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="250" height="100">
<g fill="none" stroke="orange" stroke-width="5">
<path stroke-dasharray="3,5" d="M5 30 l215 0" />
<path stroke-dasharray="12,12" d="M5 60 l215 0" />
<path stroke-dasharray="30,15,10,10,10,15" d="M5 90 l215 0" />
</g>
</svg>
</body>
</html>