美文网首页
svg基础--基本语法与标签

svg基础--基本语法与标签

作者: 饥人谷_Leonardo | 来源:发表于2018-08-17 10:42 被阅读5次

svg系列–基础

这里会总结svg的基础知识和一些经典的案例。

svg简介

SVG(Scalable Vector Graphics)is an XML-based Language for creating graphics.
这是MDN英文文档对svg的介绍。

svg支持css,这一点有效的将图形和样式区分开。

svg的应用:
1、绘图
2、动画

如何在网页中引用svg元素

    svg元素可以通过<embed>、<object>或者<iframe>嵌入网页之中,但是我们这里推荐使用<embed>,
兼容性比较好。

    <embed src="circle.svg" type="image/svg+xml" />

    <svg width="" height="">绘制的内容</svg>

一些公共属性

  • fill: 填充色 | url(id)这里主要是引用渐变色作为背景
  • stroke: 线条的颜色
  • stroke-width: 线条的宽度
  • stroke-linecap: 线条末尾的样式 (默认)butt (圆角)round (方形)square ,round和square会影响线条的长度
  • opacity: 不透明度 0~1
  • fill-rule: nonzero (非零环绕原则)evenodd
  • stroke-dasharray: 创建虚线数组 x,y,z,..... (长度,间隔,长度,间隔,。。。。)
  • stroke-dashoffset: 偏移
  • filter: url(id) 添加滤镜

绘制矩形

    ---------
      矩形
    ---------
    <rect x="" y="" rx="" ry="" width="" height=""></rect>
    (x, y): 左上角坐标
    rx: x轴圆角半径
    ry: y轴圆角半径
    width: 长度
    height: 高度  

绘制圆

    ---------
      圆
    ---------
    <circle cx="" cy="" r=""></circle>
    (cx, cy): 圆心
    r: 半径

绘制椭圆

    --------------
      椭圆
    --------------
    <ellipse cx="" cy="" rx="" ry=""></ellipse>
    (cx, cy): 中心点
    rx: x轴半径
    ry: y轴半径

绘制线条

    --------
      线条
    --------
    <line x1="" y1="" x2="" y2=""></line>
    (x1, y1): 线条的起始点
    (x2, y2): 线条的结束点

绘制多边形

    ---------------
      多边形polygon
    ---------------
    <polygon points=""></polygon>  
    points: x,y x1,y1 ........

绘制曲线

    ----------------
      曲线polyline
    ----------------
    <polyline points=""></polyline>  
    points: x,y x1,y1 .........

绘制路径

    ---------------
      路径
    ---------------
    <path d=""></path>
    d: 路径的描述
    主要的语法:
    M: moveTo
    L: lineTo
    H: horizontal lineTo
    V: vertical lineTo
    C: curveto
    S: smooth curveto
    Q: quadratic Bézier curve
    T: smooth quadratic Bézier curveto
    A: elliptical Arc
    Z: closepath

    命令区分大小写,除了Z。大写表示绝对位置,小写表示相对位置。  

绘制文本

    ---------------
      绘制文本
    ---------------
    <text x="" y="" text-anchor="" dx="" dy="">text</text>
    (x, y): 文字左下角的起始坐标
    text-anchor: start middle end 文本锚点(可能会和我们预期的坐标有出入)
    dx: 横轴的偏移
    dy: 纵轴的偏移

    路径文本的绘制
    <textPath xlink:href="#path">text</textPath>

    <text>中还可以嵌套<tspan x="" y="">text</tspan>

    同时文本也可以作为超链接
    <a xlink:href="" target="">
      <text></text>
    </a>

滤镜的使用

    -----------------
      滤镜
    -----------------
    <filter id=""></filter>

MDN的案例

渐变

  --------------
    渐变
  --------------
  线性渐变
  <linearGradient x1="" y1="" x2="" y2="" gradientUnits>
    <stop offset="" style="stop-color:;stop-opacity:;"></stop>
  </linearGradient>
  gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
  x1: 渐变开始横坐标
  y1: 渐变开始纵坐标
  x2: 渐变结束横坐标
  y2: 渐变结束纵坐标
  offset: 渐变开始的位置 0% - 100%

  放射性渐变
  <radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits>
    <stop offset="" style="stop-color:;stop-opacity:;"></stop>
  </radialGradient>
  gradientUnits: 定义坐标 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
  cx: 外层圆心横坐标
  cy: 外层圆心纵坐标
  fx: 内层圆心横坐标
  fy: 内层圆心纵坐标
  r: 发散的半径
  offset: 渐变开始的位置 0% - 100%

常用的几个标签

  ----------
    裁剪
  ----------
  <clipPath id="">裁剪路径</clipPath>

  ----------
    引用元素
  ----------
  <defs>声明引用元素</defs>

  ----------
    拷贝
  ----------
  <use x="" y="" width="" height="" xlink:href="id"></use>    
  (x, y): 克隆对象的左上角坐标
  width: 克隆对象的宽度
  height: 克隆对象的高度
  xlink:href 引用克隆对象

  ----------
    模式
  ----------  
  <pattern id="" width="" height="" patternUnits="" patternTransform="">模式内的形状</pattern>
  width: 模式的宽度
  height: 模式的高度
  patternUnits: 定义pattern的坐标系统 userSpaceOnUse(不会对pattern的单位进行缩放) | objectBoundingBox(会)
  patternTransform: 变换

  ----------
    遮罩
  ----------
  <mask maskUnits="" x='' y="" width="" height="">内容</mask>
  (x, y): 裁剪的左上角坐标。
  width: 裁剪的宽度
  height: 裁剪的高度

CSS3中的svg的影子

    ---------------------
      clip-path 裁剪
    ---------------------
    clip-path:
    第一种: url(id) 配合svg的<clipPath>
    第二种: polygon(x y,x1 y1,x2 y2,.......)
    第三种:inset(top right bottom left round rt rr rb rl) 圆角矩形

    这里比较重要的一点就是polygon的过渡动画必须要求各个状态的点的个数一样

相关文章

  • svg基础--基本语法与标签

    svg系列–基础 这里会总结svg的基础知识和一些经典的案例。 svg简介 如何在网页中引用svg元素 一些公共属...

  • WEB前端开发职业学习路线初级完整版

    web页面制作基础 web简介,HTML语法基础,HTML基本结构,单双标签,标签属性,标签嵌套规则,注解,HTM...

  • 学习SVG

    在线练习SVG 编辑器 基本语法 CSDN

  • HTML快速恢复 之 XML JSON

    1. XML W3Cschool在线验证XML语法规则 (仅文档拖入有效) 概念 基本语法 1.1 SVG SVG...

  • svg基础语法

    svg绘制带有圆角及透明度的矩形 通过opacity可以给整个svg图形添加透明度。当然,也可以使用fill-op...

  • eyoucms for 数据循环输出标签

    【基础用法】 名称:for 功能:数据/记录循环输出标签(注:类似与volist、foreach标签) 语法: {...

  • 【1Day】Joshua—初识html+css学习笔记(1)

    目录学习web前端开发基础技术需要掌握认识html标签标签的语法认识html文件基本结构学习web前端开发基础技术...

  • SVG基础

    SVG基础 概念 作用于SVG标签的属性 作用于SVG内部元素的样式 SVG内部元素 一、概念 该部分主要说明SV...

  • D3.js学习笔记(6)--写个饼图

    SVG基础 g标签 作用:将相关元素组合在一起的容器 path标签 path标签可以说是svg中的精华所在,路径元...

  • HTML5

    #SVG矢量图绘制 SVG标签用于绘制矢量图。 与HTML标签相比:它们都是XML标签的衍生产物,属于平级的兄弟关...

网友评论

      本文标题:svg基础--基本语法与标签

      本文链接:https://www.haomeiwen.com/subject/xzccbftx.html