d3之svg关于stroke的东西

本文转载在csdnm,附上原文链接:https://blog.csdn.net/ning0_o/article/details/54970474

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

1.stroke

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

2.stroke-width

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

3.stroke-linecap

描边端点表现形式

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相结合可以做出很炫酷的效果

6.stroke-linejoin

描边转角的表现方式


转角的表现方式

7.stroke-opacity

描边透明度

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,389评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...
    踏浪free阅读 10,089评论 0 2
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,073评论 0 0
  • 概述 今天我们来探究一下android的样式。其实,几乎所有的控件都可以使用 background属性去引用自定义...
    CokeNello阅读 10,414评论 1 19

友情链接更多精彩内容