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 ...
随机推荐
- Relative atomic mass
Relative atomic mass Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Oth ...
- Flask-SQLAlchemy配置
下面是 Flask-SQLAlchemy 中存在的配置值.Flask-SQLAlchemy 从您的 Flask 主配置中加载这些值. 注意其中的一些在引擎创建后不能修改,所以确保尽早配置且不在运行时修 ...
- 用libtommath实现RSA算法
RSA算法描述: 1) 选择两个大素数 p.q, 计算 n = p*q; 2) 产生 e, d 使: e*d = 1mod(p-1)(q-1) e 与 (p-1)(q-1) 互质 [公钥] e.n [ ...
- bzoj 4571 [Scoi2016]美味——主席树
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4571 按位考虑,需要的就是一个区间:比如最高位就是(2^k -x). 对于不是最高位的位置该 ...
- Azure SQL Database (27) 创建Table Partition
<Windows Azure Platform 系列文章目录> 昨天客户正好提到这个问题,现在记录一下. 我们在使用传统的SQL Server,会使用Table Partition,这个功 ...
- Module：template
ylbtech-Module: 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbtech. ...
- vuex 命名空间
默认情况下,模块内部的action mutation getter是注册在全局命名空间的,如果希望你的模块具有更高的封装度和复用性,你可以通过添加namespaced:true的方式使其成为带命名空间 ...
- 卸载TwinCat3之后vs未能正确加载包错误解决
如上图所示错误. 使用vs开发人员命令提示,输入以下代码.会清除所有用户设置,然后就没有错误提示了. devenv /resetuserdata
- 准备看的ros相关源码
进程通信:lcm 导航:navigation 3D可视化工具:rviz Mobile Robot Programming Toolkit:mrpt 其他: 人体肌肉:simbody openslam ...
- counting the numbers
题意: 给定$a,b,c$ ,求解满足 $1 \leq m \leq b, 1 \leq n \leq c, a | mn$ 的 $(m,n)$ 数对个数. $a \leq INTMAX$, $b \ ...