SVG
文章平均质量分 77
natsu-cc
起床搬砖啦~
展开
-
SVG的基本使用方式
文章简介:入门章节,主要是分享网上SVG的技术点,整合成一个完整的技术文档,形成一个完整的技术框架,也方便SVG基础差的新人学习。 进阶需要我们进一步去学习研究归纳的内容,用于提升我们SVG的技术面,后期如果有精力还可以出个一个高级篇用于学习SVG的标准。参考链接:MOZ张鑫旭博客SVG标准...原创 2021-03-25 22:45:34 · 244 阅读 · 0 评论 -
SVG进阶-理解viewBox
viewPort表示SVG可见区域的大小,或者可以想象成舞台大小,画布大小。<svg width="500" height="300"></svg>在SVG中,值可以带单位也不可以不带。一个不带单位的值可以在用户空间中通过用户单位声明。如果值通过用户单位声明,那么这个值的数值被认为和px单位的数值一样。这意味着上述例子将被渲染为500px*300px的视窗。你也可以使用单位来声明值。SVG支持的长度单位有:em,ex,px,pt,pc,cm,mm,in和百分比。Vie原创 2021-03-25 22:43:50 · 1695 阅读 · 0 评论 -
SVG进阶-坐标与变换
transformsvg 中的transform可以写在属性中,也可以写在css中,写在css中要遵循css的规则,在这里就不详细去介绍了,这里主要介绍一下svg的transform属性。svg的transform属性包括:位移translate, 旋转rotate, 缩放scale, 斜切skew以及直接矩阵matrix. 但只局限于2D层面的变换。SVG似乎只支持二维变换(若有不对,欢迎指正),且类似translateX, rotateX也都是不支持的。css中transform其坐标是相对于当原创 2021-03-25 22:28:10 · 1159 阅读 · 0 评论 -
SVG进阶-sprite 雪碧图
前言由于SVG自身的矢量性质,不管在什么情况下,图标都很清晰,可以适应不同尺寸大小和不用分辨率。不用担心模糊和锯齿。同时还能更改图标的填充颜色。CSS sprite 和SVG Sprite传统的CSS sprite可以分为图片和字体图片。图片是将所有的icon整合到一张图中,然后通过定位获取其中的某个图标。有点是管理简单,网络请求少。缺点是无法更改图标的样式,在高分辨率的屏幕下看和周围的样式比较起来有点模糊。而且大于图标原图大小的渲染也会导致图片模糊。所用同样的图标有时需要制作很多个。相对来原创 2021-03-25 22:08:44 · 1581 阅读 · 0 评论 -
SVG进阶-SMIL动画
SMILSMIL是指同步多媒体集成语言(Synchronized Multimedia Integration Language)SVG相关的动画都是基于这种语言标准实现的SMIL允许你做下面这些事情:动画元素的数值属性(X, Y, …)动画属性变换(平移或旋转)动画颜色属性沿着运动路径运动其中前面三条CSS3都是可以实现的,就是最后一条,暂时还不能实现。当然啦SMIL这门标准的订立不是为了解决CSS3的缺陷的。SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组原创 2021-03-25 22:00:00 · 603 阅读 · 0 评论 -
SVG入门 - javascript操作
DOM操作svg看起来是一个整体,但是如果svg代码直接写在HTML页面之中,它就成为页面DOM的一部分,可以直接用DOM操作。<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle id="mycircle" cx="400" cy="300" r="50" /><svg>上面代码插入网页之后,也可以用 CSS 定制样式:circle { s原创 2021-03-25 21:30:57 · 2316 阅读 · 0 评论 -
SVG入门-嵌入XML和转Base64
<foreignObject>标签<foreignObject>是SVG的一个子标签,这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。举个例子:<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="50"> <body xmlns="http://www.w3.org/1999/xhtml">原创 2021-03-25 21:23:44 · 4213 阅读 · 2 评论 -
SVG入门-动画
前言SVG动画能够实现和CSS3动画类似的效果,除此之外还能够实现强大的路径动画,也就是使物体按照一定的路径移动。SVG 动画元素介绍svg可以设置动画的元素有5个,分别为 <set> <animate> <animateColor> <animateTransform> <animateMotion>接下来我们具体来看看每一个元素的作用:setset用于设置属性值,可以用于实现延迟设置功能,也就是可以在特定时间之后修改某个属性值原创 2021-03-25 20:45:37 · 1648 阅读 · 0 评论 -
SVG入门-滤镜
前言虽然SVG不是一种位图描述语言,佴它仍然允许我们使用一些相同的工具,比如滤镜。当SVG阅读器程序处理一个图形对象时,它会将对象呈现在位图输出设备上;在某一时刻,阅读器程 序会把对象的描述信息转换为一组对应的像素,然后呈现在输出设备上。例如我们用SVG的元素指定一组操作(也称作基元,primitive),在对象的旁边显示一个模糊的投影,然后把这个滤镜附加给一个对象。由于图片在显示样式中用了滤镜,所以SVG不会将图片直接渲染为最终图形。相反,SVG会渲染图片的像素到临时位图中。由滤镜指定的操作会被应用到原创 2021-03-25 20:18:01 · 490 阅读 · 0 评论 -
SVG入门-基本变换
前言SVG元素的形变都会用到一个元素属性transform,跟CSS的transform的形变差不多。HTML transform和SVG transformSVG自带transform属性,例如:<svg width="200" height="150"> <rect x="30" y="30" width="120" height="90" transform="rotate(45)"></rect></svg>功能基本上和CSS原创 2021-03-23 20:44:25 · 428 阅读 · 0 评论 -
SVG入门-裁剪和遮罩
前言擦除已经创建的元素的部分内容,最初看起来有点矛盾。但是如果你打算在SVG中创建一个半圆形,你将很快发现下面的属性的作用了。Clipping用来移除在别处定义的元素的部分内容。在这里,任何半透明效果都是不行的。它只能要么显示要么不显示。Masking允许使用透明度和灰度值遮罩计算得的软边缘。裁切我们在一个圆形的基础上创建上面提到的半圆形:<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://原创 2021-03-23 20:33:28 · 1413 阅读 · 0 评论 -
SVG入门-纹理
图案<patterns>的功能非常强大,在pattern元素内部你可以包含任何之前包含过的其它基本形状,并且每个形状都可以使用之前学习过的任何样式样式化,包括渐变和半透明。用<pattern>定义的图案,可以被用在其他元素的fill或者stroke属性中。<pattern id="pa"> <!-- 描绘pattern图案的svg元素 --></pattern><rect x="0" y="0" height="100" w原创 2021-03-22 23:56:58 · 724 阅读 · 0 评论 -
SVG入门-渐变
前言SVG并非只能简单填充颜色和描边,更令人兴奋的是,你还可以创建和并在填充和描边上应用渐变色。有两种类型的渐变:线性渐变和径向渐变。你必须给渐变内容指定一个id属性,否则文档内的其他元素就不能引用它。为了让渐变能被重复使用,渐变内容需要定义在<defs>标签内部,而不是定义在形状上面。线性渐变线性渐变沿着直线改变颜色,要插入一个线性渐变,你需要在SVG文件的defs元素内部,创建一个<linearGradient> 节点。<svg width="120" heig原创 2021-03-22 23:42:57 · 1132 阅读 · 0 评论 -
SVG入门-填充和边框
前言当我们绘制好了形状之后,是不会在SVG上显示出来(当然浏览器会给形状定义默认的填充色)。需要学习如何给形状添加颜色。可以使用几种方法来着色,包括指定对象的属性,使用内联CSS样式,或者内嵌的CSS样式,或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS,对于这些方法都有优缺点。Fill 和 Stroke 属性要使得形状显示出来,可以用两个属性来解决,一个是fill属性,一个是stroke属性,fill是填充,stroke是描边。<rect x="10" y="原创 2021-03-22 23:34:07 · 2215 阅读 · 0 评论 -
SVG入门-文字
SVG 文字该部分分为4个主要部分:<text>和<tspan>标签详解文本水平垂直居中问题<textpath>让文本在指定路径上排列插入超链接<text>和<tspan><text>和<tspan>标签是定义文本的基本标签。<text>参数描述默认值x文本绘制x轴位置0y文本绘制y轴位置0dx每个字符相对前一个字符的偏移距离0dy原创 2021-03-22 00:16:10 · 2245 阅读 · 0 评论 -
SVG入门-路径
简介<path>元素是SVG基本形状中最强大的一个,他不仅能创建其他基本形状,还能创建更多复杂的其他形状。<path>只需要设定很少的点,既可以创建平滑流畅的线条(比如曲线)。虽然用XML或文本编辑器来编辑path元素不是很容易,学习本章可以帮助我们理解<path>是如何工作的。<path>元素的形状是通过属性D定义的,属性d的值是一个“命令+参数”的序列,主要讲解的是这些命令和参数,并且展示一些示例。每一个命令都用一个关键字母来表示,比如字母M表示“M原创 2021-03-21 23:22:35 · 589 阅读 · 0 评论 -
SVG入门-标签2
不可视标签不可视标签是svg标签中比较核心的部分,扩展了svg的功能。这部分标签不能之前显示在svg视图上,但可以用于定义纹理,和管理标签。<use><use> 标签用于复制一个形状.<use>标签是会显示的,显示的形状为href引用中定义的节点的内容,use本身不定义形状的路径。<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircl原创 2021-03-21 23:22:06 · 1321 阅读 · 0 评论 -
SVG入门-标签1
概述:SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其他图像格式都是基于像素处理的,SVG 则是属于对图像的形状描述,所以它本质上是文本文件,具有体积较小,且不管放大多少倍都不会失真的优点。SVG可以直接以DOM节点的形式,插入到页面中显示,跟其他DOM节点一样可以设置样式和通过JS操作;也可以嵌入到 标签中显示;同时还有一个比较关键的功能是svg可以不经格式化直接转换为base64。<img src="data:image原创 2021-03-21 23:21:17 · 827 阅读 · 0 评论