SVG图像学习

参考阮一峰老师: SVG 图像入门教程

基本使用

可以直接放入到html中

<body>

  <svg

    viewBox="0 0 800 600"

    >

    <circle id="mycircle" cx="400" cy="300" r="50" />

  </svg>

</body>

可以通过其他的带有src各种方式引入

<img src="circle.svg">

<object id="object" data="circle.svg" type="image/svg+xml"></object>

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

<iframe id="iframe" src="icon.svg"></iframe>

可以使用css的背景图引入

.logo {

  background: url(icon.svg)

}

转成BASE64编码

<img src="data:image/svg+xml;base64,[data]">

语法

`<svg>`

有width和height属性.
可以是相对单位
默认大小, 300宽和150高

<body>

  <svg

    width="100%"

    height="100%"

    >

    <circle id="mycircle" cx="50" cy="50" r="5" />

  </svg>

</body>

展示一部分使用viewBox属性
四个属性, 分别是横纵坐标, 视口的宽度和高度
视口必须适配所在空间.
如果不指定width和height属性, 只指定viewBox属性, 相当与只给定了SVG图像的长宽比
SVG图像的默认大小等于所在HTML元素的大小

  <!--

    视口的大小是50 * 50

    svg的图像是 100 * 100

    视口就会放大去适配svg的大小, 所以放大了四倍

    说真的, 我不理解

  -->

  <svg

    width="100"

    height="100"

    viewBox="50 50 50 50"

    >

    <circle cx="50" cy="50" r="50" />

  </svg>

`<circle>`

圆形
cx, cy, r: 横纵坐标, 半径
css元素类:
- fill: 填充色
- stroke: 描边色
- stroke-width: 边框宽度

  <style>

    .red {

      fill: red;

    }

    .fancy {

      fill: none;

      stroke: black;

      stroke-width: 3pt;

    }

  </style>

  <svg

    width="100"

    height="100"

    >

    <circle cx="30" cy="50" r="25" />

    <circle cx="30" cy="50" r="25" class="red" />

    <circle cx="30" cy="50" r="25" class="fancy" />

  </svg>

`<line>`

直线
x1, y1是开始, x2, y2 结束. 接受style样式渲染

  <svg

    width="300"

    height="180"

    >

    <line x1="0" y1="0", x2="200", y2="0" style="stroke:rgb(0,0,0);stroke-width: 5;">

  </svg>

`<polyline>`

折线
points属性指定了每个端点的坐标
横纵左边用逗号分隔, 点点之间用空格分隔

  <svg

    width="300"

    height="180"

    >

    <polyline points="3,3 20,28, 3,53" fill="none" stroke="black"/>

  </svg>

`<rect>`

矩形
xy左上角的纵横坐标, wh宽高

  <svg

    width="300"

    height="180"

    >

    <rect x="0" y="0" height="100"  width="200" style="stroke: #70d5dd; fill: #dd524b" />

  </svg>

`<ellipse>`

椭圆
cx, cy, 中心的横纵坐标
rx, ry, 椭圆的横纵向轴

  <svg

    width="300"

    height="180"

    >

    <ellipse cx="60" cy="60", ry="40" rx="20" stroke="black" stroke-width="5" fill="silver" />

  </svg>

`<path>`

路径
d属性后面表示绘制顺序, 值是一个长字符串, 每个字母表示一个绘制动作
- M: 移动到
- L: 画直线到
- Z: 闭合标签

  <svg

    width="300"

    height="180"

    >

    <path d="

      M 18,3

      L 46,3

      L 46,40

      L 61,40

      L 32,68

      L 3,40

      L 18,40

      Z

    "></path>

  </svg>

`<text>`

xy文本区块的基线起点的横纵坐标
样式可以用class和style属性指定

  <svg

    width="300"

    height="180"

    >

    <text x="30" y="10">Hello World</text>

  </svg>

`<use>`

复制一个形状
href指定要复制的节点
xy是左上角的坐标
还可以指定width和height坐标

  <svg

    width="300"

    height="180"

    viewBox="0 0 30 10"

    >

    <circle id="myC" x="5", y="5" r="4" />

    <use href="#myC" x="10" y="0" fill="blue" />

    <use href="#myC" x="20" y="0" fill="white" stroke="blue"/>

  </svg>

`<g>`

将多个形状组成一个group, 方便复用

  <svg

    width="300"

    height="180"

    >

    <g id="myC">

      <text x="25" y="20">圆形</text>

      <circle cx="50" cy="50" r="20" />

    </g>

    <use href="#myC" x="100" y="0" fill="blue" />

    <use href="#myC" x="200" y="0" fill="white" stroke="blue"/>

  </svg>

`defs`

用于自定义形状, 但是内容不会显示, 仅仅可以引用

  <svg

    width="300"

    height="180"

    >

    <defs>

      <g id="myC">

        <text x="25" y="20">圆形</text>

        <circle cx="50" cy="50" r="20" />

      </g>

    </defs>

    <use href="#myC" x="100" y="0" fill="blue" />

    <use href="#myC" x="200" y="0" fill="white" stroke="blue"/>

  </svg>

`pattern`

pattern标签将一个圆形定义为dots模式
patternUnits="userSpaceOnUse"表示标签的宽度和长度是实际的像素比.
fill: 指定的按照这个模式填充矩形

  <svg

    width="300"

    height="180"

    >

    <defs>

      <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">

        <circle fill="red" cx="50" cy="50" r="35" />

      </pattern>

    </defs>

    <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />

  </svg>

`image`

xlink: 表示来源链接

  <svg

    width="100"

    height="100"

    >

    <image xlink:href="./download.jpg" width="50%" height="50%" />

  </svg>

`animate`

产生动画效果
属性包含如下:
- attributeName: 发生动画效果的名称
- from: 单次动画的初始值
- to: 单词动画的结束值
- dur: 单次动画持续的时间
- repeatCount: 动画的循环模式
可以在多个属性上定义动画

  <svg

    width="500"

    height="500"

    >

    <rect x="0" y="0" width="100" height="100" fill="#feac5e">

      <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite"></animate>

      <animate attributeName="width" to="500" dur="2s" repeatCount="indefinite"></animate>

    </rect>

  </svg>

`animateTransform`

animate对css的transform起作用的方式
可以让图案旋转变形

  <svg

    width="500"

    height="500"

    >

    <rect x="250" y="250" width="50" height="50" fill="#feac5e">

      <animateTransform

        attributeName="transform"

        type="rotate"

        begin="0s"

        dur="10s"

        from="0 200 200"

        to="360 400 400"

        repeatCount="indefinite"

      />

    </rect>

  </svg>

JavaScript操作

DOM操作

正常获取, 正常操作就可以了

  <style>

  circle {

    stroke-width: 5;

    stroke: #f00;

    fill: #ff0;

  }

  circle:hover {

    stroke: #090;

    fill: #fff;

  }

  </style>

  <svg

    id="mySvg"

    viewBox="0 0 800 600"

    >

    <circle id="mycircle" cx="400" cy="300" r="50" />

  </svg>

  <script>

    var  mycircle = document.getElementById('mycircle')

    mycircle.addEventListener('click', function (e) {

      console.log('circle clicked - enlarging')

      mycircle.setAttribute('r', 60)

    })

  </script>

后面还有一些读取SVG源码, 转换Cavas没写.. 懒得看了.

还有一个实例, 有兴趣的可以看阮一峰老师的博客了. 我就是入个门, 看看svg是什么.

SVG图像学习的更多相关文章

Art-Directing SVG图像viewBox属性
Art-Directing SVG图像viewBox属性作者:彦子日期:2015-06-02 点击:992 svg 译者注:根据Google Dev文档的解释,Art Direction在这篇文章 ...
使用SVG图像作为loading加载以保证图像高清不模糊
使用教程接下来设计达人网小编为大家讲解这个使用方法,其实是相当简单的. STEP 1: 复制你想要的SVG加载动画代码到<body>里面,小编随意复制一个代码如下:<svg ver ...
svg滤镜学习
SVG滤镜绝对称得上是他最强大的功能之一,在不影响任何文档结构的前提下,允许你给你的矢量图形添加各种专业视觉效果,我个人给他的定义就是,把PS装到了网页上. 一. SVG滤镜的原理基本原理描述太多 ...
SVG 图像入门教程
http://www.ruanyifeng.com/blog/2018/08/svg.html 一.概述 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector ...
SVG相关学习(一)SVG基础
SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" heigh ...
svg的学习
svg的学习 1,初步了解 1,大致看了一下svg的简介,在图形的操作和展示上有很大的优势,例如不会失精:灵活的dom操作:很好的兼容性(IE需要下载插件).so,是一门值得深究的前端课程: 2,看了 ...
SVG图像技术摘要
该公司今天没有,研究了最近流行SVG技术,发现,随着css3不断流行,和浏览器技术的发展,SVG网站将取代大量的图片,成为主流站点图片展示. AI是我们经常使用的矢量图编辑器,如今AI能够直接另存SV ...
SVG绘图学习总结
在我们平时做的很多网站项目中都会需要绘制各种各样的二维矢量图形.比如做城市地下管网的断面图.管线管点的坐标位置矢量标识图.钻孔位置或地层剖面图等等.我们有很多中方法来绘制这些矢量图(vml.canva ...
JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递C ...

随机推荐

XML中CDATA和#PCDATA的区别
在XML文档中, 能看到“CDATA"的地方有三处: 1)在DTD中,指定标签中某个属性的类型为字符型时,使用CDATA.因为XML解析器会去分析这段字符内容,因而里面如果需要使用>, ...
最新版ADT(Build: v22.6.2)总是引用appcompat_v7的问题
昨天在ADT Manager里更新了一些组件,结果ADT不支持.索性直接下载了最新的ADT.但是发现无论创建什么类型的应用(无论支持的最低API是多少,或者是不是用模板),都会在创建应用的同时创建一个 ...
SDOI2017 Round1 Day2 题解
T2好厉害啊……AK不了啦……不过要是SCOI考这套题就好了240保底. BZOJ4819 新生舞会模板题,分数规划+二分图最大权匹配. 费用流跑得过,可以不用KM. UPD:分数规划用迭代跑得飞快 ...
初学Java（一）
基本语法: 编写Java程序时,应注意以下几点: 1.大小写敏感:java是大小写敏感的,这就意味着标识符Hello与hello是不同的. 2.类名:对于所有的类来说,类名的首字母应该大写.如果类名由 ...
Linux服务：使用Supervisor管理进程
一.简介由于基本每个公司都会用到supervisor这个进程管理工具,这里简单阐述一下. Supervisor (http://supervisord.org) 是一个用Python写Linux下的 ...
SNMP：简单网络管理协议
基于 TCP/IP 的网络管理包括两部分:网络管理站 (manager) 和被管理的网络单元(被管设备).这些被管设备的共同点就是都运行 TCP/IP 协议.管理进程和代理进程之间的通信有两种方式,一 ...
一、mysql简述
该套讲义参考动力节点郭鑫老师的mysql视频整理所得 1.DBMS--数据库管理系统 Data Base Management System eg: mysql数据库管理系统 2.DB--数据库/仓 ...
JQ实现图片上传预览功能
<input type="file" name="img" id="test1"> <img src="&quo ...
Sandy and Nuts
题意: 现在有一个$n$个点的树形图被拆开,现在你知道其中$m$条边,已经$q$对点的$LCA$,试求原先的树有多少种可能. 解法: 考虑$dp$,$f(x,S)$表示$x$的子树内的点集为$S$(不 ...
1.1-1.4 sqoop概述及安装cdh版hadoop
一.概述 Sqoop是一个在结构化数据和Hadoop之间进行批量数据迁移的工具,结构化数据可以是Mysql.Oracle等RDBMS. Sqoop底层用MapReduce程序实现抽取.转换.加载,Ma ...

SVG图像学习

基本使用

语法

<svg>

<circle>

<line>

<polyline>

<rect>

<ellipse>

<path>

<text>

<use>

<g>

defs

pattern

image

animate

animateTransform

JavaScript操作

DOM操作

后面还有一些读取SVG源码, 转换Cavas没写.. 懒得看了.

还有一个实例, 有兴趣的可以看阮一峰老师的博客了. 我就是入个门, 看看svg是什么.

SVG图像学习的更多相关文章

随机推荐

热门专题

`<svg>`

`<circle>`

`<line>`

`<polyline>`

`<rect>`

`<ellipse>`

`<path>`

`<text>`

`<use>`

`<g>`

`defs`

`pattern`

`image`

`animate`

`animateTransform`