资讯专栏INFORMATION COLUMN

svg的基本图形与属性【小尾巴的svg学习笔记1】

neroneroffy / 2456人阅读

摘要:因为项目有可能用到所以学习了一下,做此笔记,图截自慕课网,侵删。下一个笔记将会描述在代码里的实际应用。

因为项目有可能用到, 所以学习了一下,做此笔记,图截自慕课网,侵删。

一、基本图形

  1、矩形

    

    x,y定义矩形的左上角坐标;

    width,height定义矩形的长度和宽度;

    rx,ry定义矩形的圆角半径长度,这里注意,如果rx给值了ry没给值,ry沿用rx的值,反之同理;

 

  2、圆形

    

    cx与cy定义圆心的坐标;

    r为圆的半径长度;

 

  3、椭圆

    

    x,y依旧为圆心的坐标;

    椭圆相较于圆使半径变为两个值,分别为:rx 横向半径和 ry 纵向半径;

    

  4、直线

    

    这个较为简单,x1,y1为起点坐标,x2,y2为终点坐标

  5、折线

    

    points:坐标,折线也较为简单,用空格或逗号间隔,依次写下目标点坐标。

  6、多边形(闭合折线)

    

    points:坐标,基本与第五的折线相同,唯一不同的是多边形会把最后一个点和起点连接起来

二、属性

  1、fill 填充颜色

  2、stork 描边颜色

  3、stork-width 描边粗细

  4、transform 变形,位移(相较于父亲)等

  5、opacity 透明度

  6、 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1)

  7、 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1)

  

做得不够详细,下次会进行补充,希望能对大家有一点点帮助。下一个笔记将会描述在代码里的实际应用。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1968.html

相关文章

  • SVG精髓》笔记(一)

    摘要:本文是基于精髓一书的简单总结,文中的均为该书提供,目的是方便大家使用时快速查阅。允许指定一个给定的一组图形伸展以适应特定的容器元素。该属性的模型为指定轴和位置,由一个对齐方式和一个对齐方式组合而成。 本文是基于《SVG精髓》一书的简单总结,文中的demo均为该书提供,目的是方便大家使用时快速查阅。 1. 坐标系统 视口(viewport):文档使用的画布区域,表示SVG可见区域的大...

    warkiz 评论0 收藏0
  • SVG精髓》笔记(二)

    摘要:元素元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构 在SVG中使用样式(四种方式,可以联想对照HTML样式方法) 内联样式, 直接在标签里设置style属性 内部样式表,可以同时为多个元素设置样式 de...

    My_Oh_My 评论0 收藏0
  • SVG精髓》笔记(二)

    摘要:元素元素会将其所有子元素作为一个组合,通常组合还会有一个唯一的作为名称。变换描述按照指定的和值移动用户坐标系统。比例值可以是小数或则负数和相同按照指定的旋转用户坐标。旋转中心由和指定根据指定的倾斜所有坐标。 3. 文档结构 在SVG中使用样式(四种方式,可以联想对照HTML样式方法) 内联样式, 直接在标签里设置style属性 内部样式表,可以同时为多个元素设置样式 de...

    entner 评论0 收藏0
  • 翻译 | 编写SVG口袋指南(上)

    摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...

    Brenner 评论0 收藏0
  • 翻译 | 编写SVG口袋指南(上)

    摘要:元素元素归属于容器和结构元素,在文档内允许嵌套使用独立的片段。如果包含葡萄的组被移动到文档的末尾,它将出现在西瓜的前面。例如,将葡萄的茎的路径移动到组的末尾将导致茎在顶部。 作者:DDU(沪江前端开发工程师)本文是原文翻译,转载请注明作者及出处。 简介 Scalable Vector Graphics (SVG)是在XML中描述二维图形的语言。这些图形由路径,图片和(或)文本组成,并能...

    linkFly 评论0 收藏0

发表评论

0条评论

neroneroffy

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<