本文概述
- stroke-width
- stroke-width
- stroke-linecap
- stroke-dasharray
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>
立即测试
推荐阅读
- XHTML属性详细介绍和解释
- SVG文字介绍和用法详解
- SVG symbol元素用法详解
- SVG defs元素用法详解
- SVG基本形状详细介绍
- LVM详细操作
- Linux系统-indoe清理
- 巧用控件优雅的将报表嵌入到组态软件中
- 公司新来一个小姐姐