SVG 教程
1. SVG 教程 2. SVG 简介 3. SVG 实例 4. SVG 在 HTML 中 5. SVG 矩形 6. SVG 圆形 7. SVG 椭圆 8. SVG 直线 9. SVG 多边形 10. SVG 曲线 11. SVG 路径 12. SVG 文本 13. SVG Stroke 属性 14. SVG 滤镜 15. SVG 模糊效果 – 高斯模糊 16. SVG 阴影 17. SVG 渐变 – 线性 18. SVG 渐变- 放射性 19. SVG 参考手册

SVG Stroke 属性

SVG Stroke 属性


SVG Stroke 属性

SVG提供了一个范围广泛stroke 属性。在本章中,我们将看看下面:

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

所有stroke属性,可应用于任何种类的线条,文字和元素就像一个圆的轮廓。


SVG stroke 属性

Stroke属性定义一条线,文本或元素轮廓颜色:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

55面试教程网 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。


SVG stroke-width 属性

Tstroke- width属性定义了一条线,文本或元素轮廓厚度:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

55面试教程网 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。


SVG stroke-linecap 属性

strokelinecap属性定义不同类型的开放路径的终结:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

55面试教程网 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。


SVG stroke-dasharray 属性

strokedasharray属性用于创建虚线:

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

55面试教程网 »

对于Opera用户:查看SVG文件(右键单击SVG图形预览源)。