#1 基本概念和标签

基本图形和属性

基本图形:

  • <rect>
  • <circle>
  • <ellipse>
  • <line>
  • <polyline>
  • <polygon>

基本属性:

  • fill: 填充
  • stroke: 描边
  • stroke-width: 描边宽度
  • transform: 变型 css3的transform属性一致

<rect>

包含属性:

  • x: x轴坐标
  • y: y轴坐标
  • width:矩形宽
  • height: 矩形高
  • rx:圆角
  • ry: 圆角
    其中圆角的值如果只给一个值,另一个自动的等于已给的值
#1 rect.jpg

示例

<svg>
    <rect x="10" y="10" width="100" height="50" fill="green" rx="10"></rect>
</svg>

<circle>

包含属性:

  • cx: 圆心x的位置
  • cy: 圆心y的位置
  • r: 圆的半径
#2 circle.jpg

示例:

# 使用fill="transparent" 是因为svg会自动填充黑色
<svg>
    <circle cx="100" cy="100" r="30" stroke="red" stroke-width="10" fill="transparent"></circle>
</svg>

<ellipse>

椭圆,在圆的基础上多一个半径

包含属性:

  • cx: 圆心x的位置
  • cy: 圆心y的位置
  • rx: 椭圆横轴方向的半径
  • ry: 椭圆纵轴方向的半径
#3 ellipse.jpg

示例:

<svg>
    <ellipse cx="60" cy="60" rx="50" ry="25" fill="pink"/>
</svg>

<line>

直线:

包含属性:

  • x1: 第一点横坐标
  • y1: 第一个点纵坐标
  • x2:第二点横坐标
  • y2: 第二个点纵坐标
#4 line.jpg

示例:

<svg>
    <line x1="10" y1="10" x2="100" y2="100" stroke="blue"></line>
</svg>

<polyline>

折线,含有多个点,不会自动闭合第一个点

包含属性:

  • points: 格式是 (xi, yi) 一次的描述点的位置, 使用空格或者逗号分隔开都可以
#5 polyline.jpg

示例:

<svg>
   <polyline points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>

// 或者使用逗号分割
<svg>
   <polyline points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent"></polyline>
</svg>

<polygon>

多边形和折线的唯一区别在于,多边形会把第一个点和最后一个点自动的闭合起来

包含属性:

  • points: 格式是 (xi, yi) 一次的描述点的位置, 使用空格或者逗号分隔开都可以
#6 polygon.jpg

示例:

<svg>
   <polygon points="10 10 20 0 40 40 80 10" stroke="red" stroke-width="2" fill="transparent"></polygon>
</svg>

// 或者使用逗号分割
<svg>
   <polygon points="10, 10, 20, 0, 40, 40, 80, 10" stroke="red" stroke-width="2" fill="transparent" />
</svg>

本文来自学习笔记svg - 慕课网

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,679评论 0 7
  • 转载请声明 原文链接 关注公众号获取更多资讯 这篇文章主要总结H5的一些新增的功能以及一些基础归纳,这里只是一个提...
    前端进阶之旅阅读 9,126评论 22 225
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,734评论 0 17
  • 9月的开学日,我背靠着一棵悬铃木,看着小团体一个个组成,我不属于其中任何一个,得不到微笑、拥抱,没有一丝假期后重逢...
    Sunny的小木屋阅读 482评论 0 2
  • 发现自己读的书也是不少的,但基本没有养成做读书笔记的习惯,也不喜欢写文章,对于技术而言看的和练习的很少,更是...
    tong阅读 116评论 0 0