LOADING

SVG简述

SVG简述

简介

SVG是一种基于 XML 的图像文件格式,他的英文全称为 Scalable Vetor Graphics,意思为可缩放的矢量图形

基本的 SVG 元素

以下列表涵盖了常用的构建块:

  • <svg> 包裹并定义整个矢量图。<svg> 标签之于矢量图就如同 <html>标签于一个web页面
  • <line>创建一条直线
  • <polyLine> 创建折线
  • <rect> 创建矩形
  • <circle> 创建圆形
  • <ellipse> 创建圆形、椭圆形
  • <polygon> 创建多边形
  • <path> 通过指定点以及点之间的线来创建任意形状

详细使用

所有标签都要包裹在<svg>中使用

  1. <line>
<svg class="main">
<line x1="100" y1="100" x2="200" y2="200" stroke="red" stroke-width="2"></line>
<line x1="100" y1="200" x2="200" y2="100" stroke="red"></line>
</svg>
  • x1 y1 是第一个点的坐标
  • x2 y2 是第二个点的坐标
  • stroke 绘制的线的颜色
  • stroke-width 线的粗细
  1. <polyline>
<svg class="main">
<polyline points="200 300,220 120,500 230" fill-opacity="0" stroke="cyan"></polyline>
</svg>

绘制折线,默认填充了黑色,可以用fill-opacity更改透明度,可以多个点,格式为x1 y1,x2 y2,x3 y3

  1. <rect>
<rect x="10" y="20" width="222" height="111" fill="pink"></rect>

绘制矩形,默认填充黑色fill可以修改填充的颜色

  1. <circle>
<circle cx="200" cy="300" r="100" style="stroke:black;fill:none"></circle>

绘制圆形, cx cy为圆心点坐标 r表示半径 sytle样式

  1. <ellipse>
<ellipse cx="200" cy="300" rx="100" ry="120" style="fill:black"></ellipse>

绘制椭圆,rx ry 表示x轴的半径和y轴的半径

  1. <polygon>
<polygon points="100 100,120 120,40 40,150 60,60 420"></polygon>

绘制多边形,points里面的参数和polyline一样`

  1. <path>
<path d=" M 10 10 L 20 20 L 30 20 L 10 40 Z " style=“fill:pink”></path>

M移动到初始位置 L 画线 Z将结束和开始点闭合

    发表回复

    电子邮件地址不会被公开。必填项已用 * 标注