Svg初学总结

gself 发布于2019-08-01 15:22 / 1569人阅读

摘要：原来使用插件来画图发现还是用实现的，打算学习了解一下，以下都是可直接在插入。和属性可使矩形产生圆角。同时是基于矢量的，所以它能够很好的处理图形大小的改变

原来使用js插件来画图highchart.js,发现还是用svg实现的，打算学习了解一下，以下都是可直接在html插入。支持浏览器：Internet Explorer9，火狐，谷歌Chrome，Opera和Safari

什么是SVG？

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

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

实例操作：

矩形源码

代码解析:

rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。
rx 和 ry 属性可使矩形产生圆角。

效果图：

圆源码

代码解析：
cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
r属性定义圆的半径

效果图：

椭圆源码

代码解析：
CX属性定义的椭圆中心的x坐标
CY属性定义的椭圆中心的y坐标
RX属性定义的水平半径
RY属性定义的垂直半径

效果图

直线源码

代码解析：
x1 属性在 x 轴定义线条的开始
y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束
y2 属性在 y 轴定义线条的结束

效果图

多边形源码

代码解析：
points 属性定义多边形每个角的 x 和 y 坐标
fill-rule：nonzero/evenodd

效果图

总结

这些只是简单的了实现了基本图形的构建，SVG是使用XML文档描述来绘图。从这点来看：SVG更适合用来做动态交互，而且SVG绘图很容易编辑，只需要增加或移除相应的元素就可以了。同时SVG是基于矢量的，所以它能够很好的处理图形大小的改变

GPU云服务器云服务器 SVG _svg svg过渡 svg图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49874.html

技术甜品店 - 收藏集 - 掘金

摘要：前端切图神器前端掘金安装前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。腾讯 Web 工程师的前端书单 - 阅读 - 掘金作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍。 JavaScript 入门《JavaScript权威指南（第六版）》 ★...

Gilbertat 2019-08-20 16:40 评论0 收藏0
[译]2018年值得关注的10大JavaScript动画库

摘要：幸运的是，供应似乎与需求相匹配，并且有多种选择。让我们来看看年值得关注的十大动画库。八年了，仍然是一个强大的动画工具。接下来在这个令人惊叹的动画库列表上的就是了。，通常被称为动画平台，我们忽略它在列表中的排名，它是列表中最受欢迎的库之一。原文链接原译文链接现代网站的客户端依靠高质量的动画，这就使得JavaScript动画库的需求不断增加。幸运的是，供应似乎与需求相匹配，并且有多种选...

Me_Kun 2019-08-23 10:33 评论0 收藏0
SVG 立方体内嵌路径拼接

摘要：第一部分是正方体部分，第二部分是中的路径动画了，第三部分则是交互旋转。然后在立方体元素上添加鼠标点击事件事件，在回调函数中做处理内容。回调函数中先记录下来鼠标点击的位置。 1.前言我使用了jquery编写交互的旋转，因为初学所以不太承受，还请见谅。样式我是写stylus编码，自动生成css。 2.正文先放上一张效果图showImg(https://segmentfault.com...

姘存按 2019-08-23 16:48 评论0 收藏0