zoukankan      html  css  js  c++  java
  • 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>

    这里写图片描述

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

    4、stroke-dasharray

    用于创建虚线

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

    这里写图片描述

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

    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>

    这里写图片描述

    6、stroke-linejoin

    描边转角的表现方式

    stroke-linejoin = miter
    stroke-linejoin = round
    stroke-linejoin = bevel

    这里写图片描述

    7、stroke-opacity

    描边透明度

  • 相关阅读:
    android添加文件打开方式以及参数传递
    Android文字图片写入CSV(Base64)并分享
    Fragment嵌套Fragment要用getChildFragmentManager
    Android数据库存取图片以及转换成缩略图
    2015已经过去三分之一了
    GridView和ListView简单使用
    WPF处理Windows消息
    90后码农的北京求职之旅
    排序算法复习—快速排序
    排序算法复习—归并排序
  • 原文地址:https://www.cnblogs.com/Zting00/p/7497651.html
Copyright © 2011-2022 走看看