svg基础

文字波浪效果效果

主要是利用了正弦曲线函数描绘出了正弦曲线.

y=Asin(ωx+φ)+k

• A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
• (ωx+φ)——相位，反映变量y所处的状态。 φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
• k——偏距，反映在坐标系上则为图像的上移或下移。
• ω——角速度， 控制正弦周期(单位弧度内震动的次数)。

<tspan>

<tspan>是在<text中来使用， 作用可以理解为html中span一样, 可以单独的给一行文字中的某些文字设置样式.

• dx, dy属性也可以设置在<tspan>上
• dx, dy属性会被覆盖, 比如在<text>和<tspan>中同时设置dx, dy; <tspan>上的设置会覆盖掉对应的<text>上的设置.

文字居中

• text-anchor - 水平居中
• 垂直居中需要模拟

我们通常会在<text>上设置x,y来确定文本的位置,
y的位置确定的文本的基线位置, 但是通常我们需要的效果是文字顶部, 底部，或中间对齐y的位置.

下图是<text y="y">的位置示意图:

b.y和b.h我们可以通过text.getBBox()来获取.

我们需要调整dy：

• 顶部对齐y: dy = y - b.y
• 底部对应y: dy = y - (b.y + b.h)
• 中部对应y: dy = y - (b.y + b.h/2)

文本路径

<path id="path1" d="M100,200Q150,150 200,200T300, 200" stroke="red" fill="none"></path>
<text>
  <textPath xlink:href="#path1">ABCDEFG</textPath>
</text>

效果:

渲染原理

影响路径文本位置的属性

• <text>

  • x属性

• <textPath>

  • text-anchor: start, middle, end, 文本与文本的起始点(通过startOffset和x可以改变)的对齐方式。
  • startOffest, 效果与<text> 上x一样, 但是不同的是取值为百分比.

• dx, dy属性

  • 切线和法线方向上的偏移

<text> 上设置x对<textPath>的影响

<path id="path1" d="M100,200Q150,0 200,200T300, 200" stroke="red" fill="none"></path>
<text x="50">
  <textPath xlink:href="#path1">ABCDEFGEFFFGSSDSD</textPath>
</text>

效果:

<text>设置y对路径文本没有效果.

<a> - 超链接

• 可以添加到任意的图形上
• xlink:href 地址
• xlink:title 提示
• target 指定打开目标

动画

动画原理

SMIL for SVG

• 参考资料

  • www.zhangxinxu.com/wordpress/2…

• 动画标签

  • <animate>, <animateTransform>, <animateMotion>

• 动画元素, 属性定位以及动画参数设置

  • attributeName, attributeType
  • from, to, dur, repeatCount, fill( remove(默认):回到初始位置, freeze: 保持动画结束的位置 )..
  • calcMode..

使用动画

1. 使用xlink:href找到使用动画的元素 <animate xlink:href="#rect1"></animate>
2. 元素中包含动画标签，表示元素将使用该动画

<rect>
    <animate></animate>
</rect>

基本使用

<animate
  attributeType="XML"
  attributeName="x"
  from="0"
  to="100"
  dur="3s"
  xlink:href="#rect1"
>
  
</animate>

动画叠加

同时变换两个属性。

begin-指定动画什么时候开始

• begin默认为0, 指的是文档加载结束就马上开始.
• begin="0; goleft.end" 这个意思是, 除了了在0秒开始， 还有golfet动画结束的时候开始

这里的效果为: goright动画结束后马上进行goleft动画; goleft动画结束后马上执行goright动画， 一直循环.

变换动画

轨迹运动

例子: 力导向图

用到的物理公式:

• $\vec{F_i} = k \vec{X_i}$

弹性公式, $F_i$(所受的力)和$X_i$(可以理解为弹簧压缩或拉伸的长度, 与弹簧的自然长度相减)都为向量. k为弹性系数.

• $\vec{F} = \sum \vec{F_i}$

一个物体所受的力等于所有作用在它上的力的和. 主要力是向量， 是有方向的.

• $\vec{a} = \vec{F}/m$

加速度.

• $\vec{v} = \vec{v_0} + a \Delta t$

速度.

基本原理

如图, 有三个点， 他们之间的连线可以看出是弹簧, 初始位置是随机的, 他们之间会受到与他们链接的弹簧的引力或者斥力. 相互作用一段时间后， 最后会达到一个稳定的位置。

受力就会有一个加速度， 从而产生运动.

这里有个很重要的概念就是向量. 向量可以理解为有方向的线段, 力, 速度， 加速度， 位移都是有方向的。

关键代码

向量, 力, 速度， 加速度， 位移都可以用向量表示：

class Vector {
	constructor(x, y){
  	this.x = x || 0;
    this.y = y || 0;
  }
  square = () =>{
  	return this.x*this.x + this.y*this.y;
  }
  length = () =>{
  	return Math.sqrt(this.square());
  }
  add = (v) =>{
  	return new Vector(this.x + v.x, this.y + v.y);
  }
  minus = (v) =>{
  	return new Vector(this.x - v.x, this.y - v.y);
  }
  multipy = (scale) => {
  	return  new Vector(this.x * scale, this.y * scale);
  }
  // 与原矢量方向一致, 指定长度
  normalize = (length) =>{
  	if(length===undefined){
    	length = 1;
    }
    return this.multipy(length / this.length());
  }
  
  static fromPoints(p1, p2){
  	return new Vector(p2.x - p1.x, p2.y - p1.y);
  }
}

demo地址

引用 - <use>

重复使用定义好的图形.

<polygon id="star" points="-10 0,-2 2, 0 10, 2 2, 10 0, 2 -2, 0, -10, -2 -2" fill="white"></polygon>
<use xlink:href="#star" x="50"/>

裁剪 -

取两个图形重合的部分.

比如如下图两个图:

通过如下代码:

将得到如下图形.

蒙板 -

可以把蒙板也看成是一个图形, 最极端的例子, 蒙板图形上的颜色有白色有黑色, 将蒙板盖在一个图形上， 与蒙板重合的部分， 如果是白色将显示， 如果是黑色将隐藏.

原始图形:

蒙板图形，使用两个圆就能得到一个月牙的性质:

将蒙板运用在原始图形的效果:

代码如下:

<circle cx="0" cy="0" r="50" fill="yellow" mask="url(#moon-mask)"></circle>
<mask id="moon-mask">
  <circle cx="0" cy="0" r="50" fill="white"></circle>
  <circle cx="20" cy="-20" r="50" fill="black"></circle>
</mask>