专栏名称: SegmentFault思否
SegmentFault （www.sf.gg）开发者社区，是中国年轻开发者喜爱的极客社区，我们为开发者提供最纯粹的技术交流和分享平台。
目录
相关文章推荐
OSC开源社区  ·  Bun ... ·  昨天  
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性 ·  昨天  
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？ ·  2 天前  
程序员的那些事  ·  印度把 DeepSeek ... ·  3 天前  
OSC开源社区  ·  AI大模型如何影响基础软件行业中的开发工具与环境？ ·  5 天前  
51好读  ›  专栏  ›  SegmentFault思否

SVG 扬帆起航

SegmentFault思否  · 公众号  · 程序员  · 2017-11-28 08:00

正文

原文链接：https://github.com/hangyangws/article/blob/master/src/svg.md

本文不能让你成为 SVG 大神，但是能让你知道、了解他「揭开神秘面纱」

基础认知

SVG「Scalable Vector Graphics」表示「可缩放矢量图形『放大不模糊』」面向未来「W3C 标准」。

基本的 SVG 文档由 根元素和 基本形状元素 构成。

作为 XML 的一种方言，SVG 必须正确的绑定命名空间（在 xmlns 属性中绑定）。 命名空间速成 获取更多信息。

SVG 文件全局有效的规则是 「后来居上」，越后面的元素越可见。

能做什么

动画、图形、渐变、旋转、滤镜、JavaScript 接口、各种超酷的动画…

和 HTML 使用的几种方式 

  1.  src="xxx.svg" height="10" width="10" />

不能使用JS来控制 

  1. .svg { background-image: url(xxx.svg);}

最好不使用 base64 格式化 SVG「阻塞其它资源」、不能使用 JS 控制 

  3.  type="image/svg+xml" src="xxx.svg" />
  5.  type="image/svg+xml" data="xxx.svg"




    
>Not support SVG

能使用JS来控制「推荐方式」 

  1.  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">…

节省 HTTP 请求，能使用 JS 控制，不能被浏览器缓存。

坐标系统

看图说话「原点在左上角」：

viewBox 

  1.  width="400" height="300" viewBox="0,0,40,30" style="border:1px solid #cd0000;">
  2.    x="10" y="5" width="20" height="15" fill="#cd0000"/>

viewBox demo

动画理解：

深度阅读 - viewBox

CSS、JS 与 SVG

内敛样式 

  1.  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  2.   
  3.    class="red" d="M10 10v20" />
  4.

外链样式 

  1. xml-stylesheet type="text/css" href="xxx.css"?>
  2.  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  3.    class="cls" d="M42 27v-20" />

JS 操作 SVG

如果 SVG 代码作为 DOM 在 HTML 内部，可以向平常一样操作 DOM 操作 SVG
如果是使用 你可以使用 contentDocument 来控制它 SVG

注意

  1. 、 background - image 形式的 SVG 不支持「外链 CSS、JS」

  2. 内敛 CSS 和 JS 最好放在 与 ]]> 之中

SVG 基础元素

  • ：SVG 的根元素，可以相互嵌套

  • ：将 SVG 中的元素进行分组操作，分组后可以看成一个单独的形状，统一转换

  • ：用于定义在 SVG 中可重用的元素，def 元素不会直接展示出来，可以通过 use 元素来引用

  • ：通过它来复用 def 元素，也包括 、 元素，使用 xlink:href = "#id" /> 调用

  • ：文本节点，可以实现 word 中的那种「艺术字」

  • ：在 SVG 中嵌套图片，可以对图片做对应的处理

  • …

SVG 形状元素

来张图压压惊：

点我查看 SVG 元素的基本 DEMO

别说话，先举个 🌰 ，一起感受一下 path： 点我

基于 path 的不同属性，可以画出各种各样的路径，所以 path 可算是 SVG 的「节点之王」
除了 path 之外的节点都「比较普通」，可以看成是对 path 的封装，比如「Rect、Circle…」

命令
命令都用一个关键字母来表示，命令 都有两种 表示方式

  1. 大写字母，表示采用「绝对定位」

  2. 小写字母，表示采用「相对定位『相对于上一个点』」

path 的命令列表

document . getElementById (‘ path ’). getTotalLength () 得到路径长度

M：moveto 移动到

L：lineto 画线到；H：horizontal lineto 水平线到；V：vertical lineto 垂直线到

L 命令将会在当前位置和新位置之间画一条线段：L x y (or l dx dy)
还有两个简写命令：H，绘制平行线。V，绘制垂直线。这两个命令都只带一个参数，标明在 x 或 y 轴移动到的位置： H x ( or h dx ) 、 V y ( or v dy )

Z：closepath 关闭路径

Z 命令会从当前点画一条直线到路径的起点，所以它还是经常被放到路径的最后。另外，Z 命令不用区分大小写：Z (or z)

C：curveto 三次贝塞尔曲线

C x1 y1 , x2 y2 , x y 或 c dx1 dy1 , dx2 dy2 , dx dy

(x1, y1)、(x2, y2) 分别是起点、终点控制点。最后一个坐标 (x, y)，表示曲线的终点
三次贝塞尔曲线 表现形式 是：曲线沿着 起点开始 到第一控制点的方向伸出，逐渐弯曲，然后沿着第二控制点到 终点的方向结束

S：smooth curveto 光滑三次贝塞尔曲线

S 命令可以用来创建与之前那些曲线一样的贝塞尔曲线，通常和 C 命令一起使用
如果 S 命令跟在一个 C 命令或者另一个 S 命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点，不应该写出来，所以 S 省略了一个对称点

Q：quadratic Belzier curve 二次贝塞尔曲线

Q x1 y1 , x y 或 q dx1 dy1 , dx dy

T：smooth quadratic Belzier curveto 光滑二次贝塞尔曲线

T x y 或 t dx dy

T 命令类似于 S 命令，用于二次贝塞尔曲线。T 命令前面最好是一个 Q 命令，或者是另一个 T 命令
如果 T 单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线

A：elliptical Arc 椭圆弧

A rx ry x - axis - rotation large - arc - flag sweep - flag x y 或 a rx ry x - axis - rotation large - arc - flag sweep - flag dx dy

  • rx ry：「椭圆」的 x，y半径

  • x-axis-rotation：X 轴旋转角度，顺时针为正数

  • large-arc-flag：1 表示用大弧度，0 表示小弧度

  • sweep-flag：弧度回话方向，1 顺时针，0 逆时针

  • x y：弧度终点

元素与样式

  • stroke

  • fill

  • transform

  • linearGradient

  • mask

  • filter

  • clipPath

一些 Demo：
svg 模糊 demo
symbol demo
symbol-use-demo
text mask demo
mask demo
clip demo
SVG 文字路径动画
linearGradient Demo

使用 CSS 请注意
把 background-color、border 改成 fill 和 stroke
上色和填充的部分一般是可以用 CSS 来设置的，比如 fill，stroke，stroke-dasharray，但不包括渐变和图案等。
另外，width、height，以及路径的命令等等，都不能用 css 设置
不是所有的属性都能用 CSS 来设置 ：SVG 规范 将属性区分成 properties 和 attributes，前者是可以用 CSS 设置的，后者不能

SVG 动画

SVG 动画 集合
SVG 的动画元素是和 SMIL Synchronized Multimedia Integration Language 开发组合作开发的。
SMIL 开发组和 SVG 开发组合作开发了 SMIL 动画规范，在规范中制定了一个基本的 XML 动画特征集合。
SVG 吸收了 SMIL 动画规范当中的动画优点，并提供了一些SVG继承实现。

大概三种实现方式：

  • JS 动画「DOM 操作『忽视它』」

  • CSS3 动画「animation、transition『不是 svg 的重点』」

  • SVG 本身的动画「基于 SMIL」「主要借助 SVG animate 相关标签」

set

set 表示此元素没有动画效果 😨😨😨。
好吧：这样的，虽然 set 虽然不能触发连续的动画，但是，其还是可以实现基本的延迟功能。
就是指：可以在特定时间之后修改某个属性值「也可以是 CSS 属性值」。

一个 Demo

animate

SVG animation 最强大的地方在于：「只要在页面放几个 animate 元素，没有任何 CSS, 没有任何JS」 

  2.   id="id"
  3.   begin="id.end + 1s"
  4.   attributeName="r"
  5.   







请到「今天看啥」查看全文


推荐文章
OSC开源社区  ·  Bun 1.2.3带来全新Glob实现——引领性能突破
昨天
OSC开源社区  ·  RAG市场的2024：随需而变，从狂热到理性
昨天
码农翻身  ·  漫画 | 为什么大家都愿意进入外企？
2 天前
程序员的那些事  ·  印度把 DeepSeek 告上法庭！三哥的“既要又要”病又犯了？
3 天前
OSC开源社区  ·  AI大模型如何影响基础软件行业中的开发工具与环境？
5 天前
THLDL领导力  ·  看商界大佬的社交潜规则！
8 年前
知心  ·  如果你爱上了属猪的人..
8 年前
机器学习研究会  ·  【学习】 文本型医疗大数据，拿来就可用？
8 年前
爱手工  ·  明晚，立体蝴蝶珠绣，要的就是这种轻奢的美
7 年前
女神进化论  ·  预算不够买大牌？有哪些男女都能用的通勤包包质量与设计感共存？
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!