欢迎来到[自学php网] ①群 287460651

主页 > 网站前端 > svg >

svg的stroke属性描边属性详解

来源:未知    时间:2018-02-02 11:29 作者:小飞侠

[导读] svg的stroke属性描边属性详解 1、stroke 定义一条线,文本或元素轮廓颜色 2、stroke-width 定义一条线,文本或元素轮廓厚度 3、stroke-linecap 描边端点表现形式 svggfill=nonestroke=blackstroke-width=1...

svg的stroke属性描边属性详解

1、stroke

定义一条线,文本或元素轮廓颜色

2、stroke-width

定义一条线,文本或元素轮廓厚度

3、stroke-linecap

描边端点表现形式

<svg>
  <g fill='none' stroke='black' stroke-width='10'>
    <path stroke-linecap='butt' d='M5 20 l215 0' />
    <path stroke-linecap='round' d='M5 40 l215 0' stroke='red'/>
    <path stroke-linecap='square' d='M5 60 l215 0' />
  </g></svg>1234567

这里写图片描述

stroke和stroke-*的属性可以继承

4、stroke-dasharray

用于创建虚线

stroke-dasharray = '10'stroke-dasharray = '10, 10'stroke-dasharray = '10, 10, 5, 5'123

这里写图片描述

绘制虚线: 一个参数时: 表示一段虚线长度和每段虚线之间的间距 
两个参数或者多个参数时:一个表示长度,一个表示间距

5、stroke-dashoffset

定义一条线,文本或元素距离(相当于基于position:relative;设置left值。只是不像left单纯的基于x方向设置, stroke-dashoffset是基于svg路径设置的)

stroke-dasharray和stroke-dashoffset相结合可以做出很炫酷的效果

举个例子:按钮鼠标滑过动效,(鼠标滑过按钮,边框绕自身选中一周)

    #shape {
      stroke-width: 6px;
      fill: transparent;
      stroke: #009FFD;
      stroke-dasharray: 85 400;
      stroke-dashoffset: -220;
      transition: 1s all ease
    }
    svg:hover #shape {
      stroke-dasharray: 70 0;
      stroke-width: 3px;
      stroke-dashoffset: 0;
      stroke: #06D6A0
    }

  <svg height="40" width="150">
    <rect id="shape" height="40" width="150" />
  </svg>123456789101112131415161718

这里写图片描述

6、stroke-linejoin

描边转角的表现方式

stroke-linejoin = miterstroke-linejoin = roundstroke-linejoin = bevel123

这里写图片描述

7、stroke-opacity

描边透明度


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com