stroke)属性。以下是一些经常使用的stroke属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
| 编号 | Stroke类型 | 描述 |
|---|---|---|
| 1 | stroke | 定义元素的文本，线条或轮廓的颜色。 |
| 2 | stroke-width | 定义任何元素的文本，线条或轮廓的粗细。 |
| 3 | stroke-linecap | 定义不同类型的结束行或任何路径的轮廓。 |
| 4 | stroke-dasharray | 用于创建虚线。 |
示例
文件:testSVG.html -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<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网络浏览器中打开testSVG.html，应该看到以下结果 -文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
stroke width 属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<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网络浏览器中打开testSVG.html，应该看到以下结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
stroke-linecap属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<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网络浏览器中打开testSVG.html，应该看到以下结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
stroke-dasharray属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html
<html>
<title>SVG Stroke</title>
<body>
<h1>Sample SVG Stroke</h1>
<svg width="800" height="800">
<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网络浏览器中打开testSVG.html，应该看到以下结果 -
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/8875.html