• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • 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>
    

    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>
    

    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>
    

    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>
    

    上篇:SVG 文本

    下篇:SVG 参考手册