一、stroke属性介绍

SVG提供了一个范围广泛stroke属性,用于描述轮廓,其中包括

  • stroke 指定颜色
  • stroke-width 指定宽度
  • stroke-linecap 指定端点样式
  • stroke-dasharray 指定间隔线数组

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

2.所有的stroke属性,可以单独指定,可以都放在style属性中。

二、stroke属性定义一条线、文本或元素的轮廓颜色,stroke-width属性定义一条线、文本或元素轮廓厚度

<svg style="border:1px solid red;" width="400px" height="300px">
<g fill='none'>
<path stroke="red" stroke-width="5" d="M20 20,300 20 " />
<path stroke="blue" stroke-width="5" d="M20 120,300 120" />
<path stroke="black" stroke-width="5" d="M20 220,300 220"/>
</g>
</svg>

三、stroke-linecap属性定义不同类型的开放路径的终结

<svg style="border:1px solid red;" width="400px" height="300px">
<g fill='none' stroke-width="10">
<path stroke="red" stroke-linecap="round" d="M20 20,300 20 " />
<path stroke="blue" stroke-linecap="butt" d="M20 120,300 120" />
<path stroke="black" stroke-linecap="square" d="M20 220,300 220"/>
</g>
</svg>

四、stroke-dasharray属性用于创建虚线

<svg style="border:1px solid red;" width="500px" height="100px">
<g fill='none' stroke='black' stroke-width='4'>
<path stroke-dasharray='5,5' d='M5 20,400,20' />
<path stroke-dasharray='10,10' d='M5 40,400,40' />
<path stroke-dasharray='20,10,5,5,5,10' d='M5 60,400,60' />
</g>
</svg>

示例1,使用stroke描述文字轮廓

<svg style="border:1px solid red;" width="400px" height="400px">
<text x='100' y='100' fill='red' style='font-size:50px;font-weight:bold;font-family:楷体'
stroke='blue' stroke-width='2'
>中文内容</text>
</svg>

示例2,在style中使用stroke属性

<svg style="border:1px solid red;" width="200px" height="400px">
<rect style="stroke:blue;stroke-width:5px;stroke-dasharray:2 10 2"
width='100' height='100' x='50' y='50'></rect> <rect style="stroke:blue;stroke-width:3px;"
stroke-dasharray='2,10,2' fill='green'
width='100' height='100' x='50' y='200'></rect>
</svg>

SVG Stroke属性的更多相关文章

  1. 学习SVG系列(3):SVG Stroke属性

    SVG stroke 属性 1.stroke 2.stroke-width 3.stroke-linecap 4.stroke-dasharray 5.stroke-opacity 6.stroke- ...

  2. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. svg & stroke & style & class

    svg & stroke & style & class svg selected style methods style class, !important fill, st ...

  4. SVG(可扩展矢量图)系列教程

    本系列教程同步至博客www.waylau.com 从新往久排序,持续更新 SVG与JS交互实例之画板 SVG <marker>创建箭头 SVG实例之中国地图 SVG实例之电力开关 SVG ...

  5. 学习SVG 重点汇总

    什么是SVG? Δ  SVG 指可伸缩矢量图形 (Scalable Vector Graphics) Δ  SVG 用来定义用于网络的基于矢量的图形 Δ  SVG使用XML格式来定义图形 Δ  SVG ...

  6. SVG 使用marker画箭头(一)

    一.使用Marker画箭头 1.定义一个箭头的marker引用 <defs> <marker id='markerArrow' markerWidth='13' markerHeig ...

  7. SVG Path路径使用(一)

    一.<path> 标签 <path> 标签用来定义路径. 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V ...

  8. Svg.Js 父类的基础操作

    一.SVG.Doc 创建SVG文档 var draw = SVG('drawing') <div id="svg1"></div> <script&g ...

  9. Svg.Js A标签,链接操作

    一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script> //SVG.A 链接创建 var draw = ...

随机推荐

  1. 007 jquery过滤选择器-----------(屬性过滤选择器)

    1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. word2013 如何设置从第三页开始编码 或 如何设置封面页和正文页页码不连续

    首先说明一下 “分节符”作用,它就是用来将整个文档分节的,添加一个分节符,文档就分成1.2两节:添加两个分节符,文档就分成1.2.3节. 当前页面具体是第几节,可以通过点击页眉页脚来查看: 从第三页开 ...

  3. 一个轻巧高效的多线程c++stream风格异步日志(一)

    一个轻巧高效的多线程c++stream风格异步日志 一个轻巧高效的多线程c++stream风格异步日志 前言 功能需求 性能需求 Logger实现 LogStream类 Logger类 LogStre ...

  4. 《编写可维护的javascript》读书笔记(上)

    最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. ...

  5. BEM

    BEM代表块(Block),元素(Element),修饰符(Modifier).BEM是由Yandex团队提出的一种CSS Class 命名方法,旨在更好的创建CSS/Sass模块.通过增加前缀的办法 ...

  6. SPFA算法 O(kE)

    主要思想是:     初始时将起点加入队列.每次从队列中取出一个元素,并对所有与它相邻的点进行修改,若某个相邻的点修改成功,则将其入队.直到队列为空时算法结束.     这个算法,简单的说就是队列优化 ...

  7. 清北学堂省选刷题冲刺班 Test Day3

    目录 2018.3.27 Test T1 T2 T3 考试代码 T2 T3 2018.3.27 Test 时间:8:00~11:30 期望得分:100+60+25=185 实际得分:100+40+25 ...

  8. hdu 4460 第37届ACM/ICPC杭州赛区H题 STL+bfs

    题意:一些小伙伴之间有朋友关系,比如a和b是朋友,b和c是朋友,a和c不是朋友,则a和c之间存在朋友链,且大小为2,给出一些关系,求出这些关系中最大的链是多少? 求最短路的最大距离 #include& ...

  9. 自动添加 Qt 开发生成的 exe 所需的依赖环境

    双击获取 exe 文件路径 cd 进入文件目录的命令 调用 Qt 自带的软件进行环境配置,命令如下 windeployqt ***.exe 自动配置了依赖环境

  10. pat advanced 1139. First Contact (30)

    题目链接 解法暴力 因为有 0000, -0000 这样的数据,所以用字符串处理 同性的时候,遍历好朋友时会直接遍历到对方,这个时候应该continue #include<cstdio> ...