SVG stroke笔画介绍和用法详解

本文概述

stroke-width
stroke-width
stroke-linecap
stroke-dasharray

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【SVG stroke笔画介绍和用法详解】它用于定义线的结尾或任何路径的轮廓的不同类型。
例子

< !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>

立即测试