SVG相关学习(一)SVG基础

SVG 相关学习

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG viewBox

<svg width="500" height="300"></svg>
viewport svg 实际大小

viewBox="x, y, width, height" // x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度

视区盒子:以视区盒子大小选中元素然后缩放至viewport的大小

preserveAspectRatio()
第1个值表示,viewBox如何与SVG viewport对齐;第2个值表示,如何维持高宽比(如果有)

  meet    保持纵横比同时比例大的方向缩放适应viewport
  slice    保持纵横比同时比例小的方向缩放适应viewport
  none    扭曲纵横比以充分适应viewport 

参考文章 张鑫旭

渐变

线性渐变

先定义再引用

   <svg width="660" height="220">
        <defs>
            <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="#05a" />
                <stop offset="50%" stop-color="#a55" />
                <stop offset="100%" stop-color="#0a5" />
            </linearGradient>
        </defs>
    </svg>
    <svg width="660" height="220">
        <rect x="10" y="10" width="600" height="200" fill="url(#linear)" />
    </svg>
    <svg width="660" height="220">
        <rect x="10" y="10" width="600" height="200" stroke="url(#linear)" stroke-width="20" fill="#fff"/>
    </svg>

gradientUnit属性

  userSpaceOnUse:(默认值) x1、y1、x2、y2表示当前用户坐标系统的坐标。也就是说渐变中的值都是绝对值。
  objectBoundingBox: x1, y1, x2, y2表示应用渐变的元素创建的边界坐标系统。也就是说渐变随着应用的元素进行了缩放。

spreadMethod属性

  pad: (默认值)使用渐变的颜色结点来填充剩余的空间。例如,如果第一个结点是20%,那么0%到20%这部分就是相同的颜色。
  reflect: 映射渐变图案,从‘start-to-end‘,再从‘end-to-start‘,然后‘start-to-end‘,直到空间都填满了。
  repeat: 重复渐变图案,从起点->终点,直到空间填满。
径向渐变

先定义再引用

   <svg width="660" height="330">
        <defs>
            <radialGradient id="radial" fx="50%" fy="50%" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stop-color="#05a" stop-opacity="1" />
                <stop offset="100%" stop-color="#0a5" stop-opacity="1" />
            </radialGradient>
        </defs>
        <rect x="0" y="0" width="600" height="300" fill="url(#radial)" />
    </svg>

stop的属性

  offset: 在径向渐变中,它表示从点(fx,fy)到外边缘的圆的百分比值距离。它定义了渐变结点的位置。值从0到1之间,或者0%到100%。
  stop-color: 定义offset结点位置的颜色
  stop-opacity: 定义颜色结点的透明度,值从0到1,或0%到100%。

gradientUnit属性和spreadMethod属性类似于线性渐变

焦点:

基本形状

矩形 rect:   x:矩形左上角的x坐标
            y:矩形左上角的y坐标
            width:矩形的宽度
            height:矩形的高度
            rx:对于圆角矩形,圆角对应的椭圆在x方向上的半径
            ry:对于圆角矩形,圆角对应的椭圆在y方向上的半径
圆 circle cx:圆心的x坐标
            cy:圆心的y坐标
            r:圆的半径
椭圆 ellipse cx:椭圆心的x坐标
              cy:椭圆心的y坐标
              rx:椭圆的x轴半径
              ry:椭圆的Y轴半径
线段 line  x1:起点的x坐标
            y1:起点的y坐标
            x2:终点的x坐标
            y2:重点的y坐标
多边形 polygon points各个点的坐标

path基本相关属性

   fill //填充(线条包裹的区间)颜色
   stroke //定义一条线,文本或元素轮廓颜色
   stroke-width //定义一条线,文本或元素轮廓厚度
   stroke-linecap //butt | round | square | inherit

stroke-dasharray,stroke-dashoffset

stroke-dasharray:绘制虚线:一个参数时: 表示一段虚线长度和每段虚线之间的间距
                          两个参数或者多个参数时:一个表示长度,一个表示间距
stroke-dashoffset: 表示虚线的起始偏移                     

path d 路径相关

直线命令:

   M:将画笔移动 M10,10(两个参数)
   H:画水平线 H100(一个参数)
   V:画竖直线 V100(一个参数)
   Z:闭合(无参数)

以上命令大写表示绝对位置(明确的坐标),小写表示相对坐标(相对于前一个点的坐标)

曲线命令:

  C 三次贝塞尔曲线 x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
    x1 y1, x2 y2 两个不同的控制点
    x y 终点

  S x2 y2, x y (or s dx2 dy2, dx dy)
    (S命令可以用来创建与之前那些曲线一样的贝塞尔曲线,但是,如果S命令跟在一个C命令或者另一个S命令的后面,
    它的第一个控制点,就会被假设成前一个控制点的对称点。如果S命令单独使用,前面没有C命令或者另一个S命令,
    那么它的两个控制点就会被假设为同一个点。)

  Q x1 y1, x y (or q dx1 dy1, dx dy)
    x1 y1 控制点确定起点终点的斜率
    x y 终点坐标

  T 二次贝塞尔曲线 x y (or t dx dy)
    和之前一样,快捷命令T会通过前一个控制点,推断出一个新的控制点。这意味着,在你的第一个控制点后面,
    可以只定义终点,就创建出一个相当复杂的曲线。需要注意的是,T命令前面必须是一个Q命令,或者是另一个T命令,
    才能达到这种效果。如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线。 

  A:画弧形 A rx ry x-axis-rotation large-arc-flag sweep-flag x y:
     rx,ry:表示弧形X,Y轴半径,
     x-axis-rotation: 弧形的旋转情况(顺时针为正)(0不旋转)
     large-arc-flag:角度大小(0表示小角度弧,1表示大角度弧)
     sweep-flag:弧线方向(0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧)
     x,y:弧的终点坐标      

三次贝塞尔曲线C:
三次贝塞尔曲线S:

二次贝塞尔曲线Q:
二次贝塞尔曲线T:

弧线命令A:

   <svg width="325px" height="325px" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <path d="M80 80
              A 45 45, 0, 0, 0, 125 125
              L 125 80 Z" fill="green"/>
      <path d="M230 80
              A 45 45, 0, 1, 0, 275 125
              L 275 80 Z" fill="red"/>
      <path d="M80 230
              A 45 45, 0, 0, 1, 125 275
              L 125 230 Z" fill="purple"/>
      <path d="M230 230
              A 45 45, 0, 1, 1, 275 275
              L 275 230 Z" fill="blue"/>
   </svg> 

参考文档MDN;

应用

github-应用例子

原文地址:https://www.cnblogs.com/homehtml/p/11973128.html

时间: 2024-10-12 05:30:39

SVG相关学习(一)SVG基础的相关文章

SVG系列教程:SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu

JAVA学习篇--JSTL基础

JSTL是什么 JSTL(JSP Standard TagLibrary,JSP标准标签库)是一个不断完善的开放源代码的JSP标签库. 为什么要用JSTL 我们JSP用于开发信息展现页非常方便;也可以嵌入java代码(scriptlet.表达式和声明)代码用来实现相关逻辑控制.看下面程序.但这样做会带来如下问题: jsp维护难度增加;出错提示不明确,不容易调试; 分工不明确;(即jsp开发者是美工,也是程序员); 最终增加程序的开发成本; <% if (session.getAttribute(

大话设计模式学习笔记——面向对象基础

前言 好记性不如烂"笔头"系列--大话设计模式学习笔记 目录 面向对象基础 面向对象基础 什么是类与实例 一切事物皆为对象,即所有的东西老师对象,对象就是可以看到.感觉到.听到.触摸到.尝到.或闻到的东西.准确地说,对象是一个自包含的实体,用一组可识别的特性和行为来标识.面向对象编程,英文叫 Object-Oriented Programming,其实就是针对对象来进行编程的意思.类就是具有相同属性和功能的对象的抽象集合.实例就是一个真实的对象.比如我们属于'人'类,而个人就是'人'类

学习之Javascript基础

1)HTML只是描述网页长相的标记语言,JavaScript是一种在浏览器端执行的语言,简称为JS,JavaScript是解释性语言,无需编译就可以随时运行,没有语法错误的部分还是能正确运行. 2)VS2010中有Javascript.JQuery的自动完成功能 3)JS点儿不出来的成员也许可用,点儿处理的成员也许不可用 4)VS2008的HTML编辑器中触发JavaScript自动完成:Ctrl+J 5)JS标签: <script type="text/javascript"&

学习linux之基础指令

2014/5/4 1.date--->显示日期的指令 date --help---->得到相关帮助,其他的指令也可这样操作 2.cal---->显示日历的指令 3.bc----->简单好用的计算器 4.sync--->数据同步写入磁盘 5.fsck--->文件系统检查指令 fsck /dev/sda7 6.chgrp-->改变所属群组 学习linux之基础指令,布布扣,bubuko.com

前端技术-svg简介与snap.svg.js开源项目的使用

前言-为什么学习snap.svg.js 前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅. (矢量图与位图最大的区别是,它不受分辨率的影响.可以任意放大或缩小图形而不会影响出图的清晰度, 可以按最高分辨率显示到输出设备上,位图即相机拍出来的,由像素块组成的图片. svg代码可使用Adobe公司的AI软件导出,该Snap.svg也是Adobe的开源项目) 虽然svg.animate并不新鲜,但由于svg的代码是由PC计

学习中专业基础与应用技术间的取舍

[来信] 老师 你好,已经学了快一个月的数据结构与算法了,平时还是以看书为主,然后在网上找一些相关的题目练手.有一个疑惑就是周围的同学有的正在学QT,MFC以便做出图形界面,想问下老师如何在基本功与这些技术中做出取舍. [回复] 我想,基本功训练和具体技术之间,不是取舍的问题.作为低年级的大学生,前者是必须要做的事,后者是可以在多种方案中做出选择的事.前者如喝水,必须要有,后者如吃面条,其实吃米饭也可以替代. 如果你能沉得住气,既然已经做了学数据结构和算法的计划,就将之坚持下来,合适的时间再学应

HtmlParser学习之一:基础内容

1.相关资料 官方文档:http://htmlparser.sourceforge.net/samples.html API:http://htmlparser.sourceforge.net/javadoc/index.html 其它HTML 解释器:jsoup等.由于HtmlParser自2006年以后就再没更新,目前很多人推荐使用jsoup代替它. 2.使用HtmlPaser的关键步骤 (1)通过Parser类创建一个解释器 (2)通过Filter或者Vistor访问Html中的内容. 3

Spark学习体系整理(基础篇、中级篇、高级篇所涉及内容)

新手刚开始学习比较迷茫,参考下面,然后找相关资料学习 1 Spark基础篇      1.1 Spark生态和安装部署          在安装过程中,理解其基本操作步骤.          安装部署            Spark安装简介            Spark的源码编译            Spark Standalone安装            Spark Standalone HA安装            Spark应用程序部署工具spark-submit