SVG-ViewBox
- 什么是ViewBox？
- ViewBox就是可视区域，用户能看到的区域
- 默认情况下，可视区域的大小和内容区域大小一致
- 但是我们也可以手动修改可视区域的大小
- ViewBox属性格式
viewBox="x y width height"
x: 修改可视区域x方向位置
y: 修改可视区域y方向位置
width/height: 修改可视区域尺寸，近大远小
x, y移动视口位置，也即移动ViewBox的位置
<svg width="200" height="200" viewBox="50 0 200 200">
<circle cx="100" cy="100" r="50" fill="red"></circle>
</svg>
width/height改变视口大小，即改变ViewBox大小
<svg width="200" height="200" viewBox="0 0 100 100">
<circle cx="100" cy="100" r="50" fill="red"></circle>
</svg>
视口不等比例缩放情况
- 默认情况下如果viewBox的尺寸是等比例缩放的，那么调整后viewBox区域的xy和内容区域的xy对齐
- 但是如果viewBox的尺寸不是等比例缩放的，那么系统就会调整viewBoxd的位置，我们设置的x/y失效
- 此时如果需要ViewBox的xy和内容区域(viewProt)的xy继续保持对齐，那么就需要使用preserveAspectRatio属性来设置对齐方式
- xMin viewport和viewBox 左边对齐
- xMid viewport和viewBox x轴中心对齐
- xMax viewport和viewBox 右边对齐
- YMin viewport和viewBox上边缘对齐
- YMid viewport和viewBox y轴中心点对齐
- YMax viewport和viewBox 下边缘对齐
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<svg width="200" height="200" viewBox="0 0 150 150">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<svg width="200" height="200" viewBox="0 0 50 150" preserveAspectRatio="xMinYMin">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
<svg width="200" height="200" viewBox="0 0 150 50" preserveAspectRatio="xMaxYMax">
<circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>
SVG动画
-
SVG中提供三种常用动画标记
<animate> 基础动画
<animateTransform> 形变动画
<animateMotion> 路径动画 -
SVG动画使用方式
2.1 创建动画，告诉动画标记哪个元素需要执行动画
2.2 创建元素，在元素中说明需要执行什么动画 -
SVG动画属性
- attributeType: CSS/XML规定的属性值的名称空间
- attributeName: 规定元素的哪个属性会产生动画效果
- from/to: 从哪到哪
- dur: 动画时长
- fill: 动画结束之后的状态，保持freeze结束状态/remove回复初始状态
方式一
<svg width="500" height="500">
<circle id="myCircle" cx="100" cy="100" r="50" fill="blue"></circle>
<animate
attributeName="r"
from="50"
to="100"
dur="3s"
fill="freeze"
xlink:href="#myCircle"
></animate>
</svg>
方式二
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="blue">
<animate
attributeName="r"
from="50"
to="100"
dur="3s"
fill="freeze"
></animate>
</circle>
</svg>
SVG动画常用属性
- repeatCount = "次数/indefinite" 规定动画重复的次数
- repeatDur = “持续时间/indefinite” 规定动画重复总时长
- begin: 规定动画开始的时间
begin="1s"
begin="click"
begin="click + 1s"
restart: 规定元素开始动画后，是否可以被重新开始执行
always: 动画可以在任何时候被重置。默认值
whnNoActive: 只有在动画没有被激活的时候才能被重置，例如在动画结束之后
never： 在整个SVG自行过程中，元素动画不能被重置
calcMode: 非连续动画，没有动画效果瞬间完成 - linear: 默认属性，匀速动画
- discrete: 非连续动画，没有动画效果瞬间完成
- paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
- spline: 配合ksyplines属性来定义各个动画过渡，自定义动画
- keyTimes: 划分动画时间片段，取值0-1
- values: 划分对应取值片段的值
复合动画
利用复合动画实现一个无限往返效果
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="blue">
<animate
id="toRight"
attributeName="cx"
from="100"
to="300"
dur="1s"
begin="click;toLeft.end"
></animate>
<animate
id="toLeft"
attributeName="cx"
from="300"
to="100"
dur="1s"
begin="toRight.end"
></animate>
</circle>
</svg>
形变动画
<animateTransform
attributeName="transform"
type="translate/rotate/scale"
></animateTransform>
<svg width="500" height="500">
<circle cx="100" cy="100" r="50" fill="blue">
<animateTransform
attributeName="transform"
type="translate"
from="0 0"
to="100 0"
dur="1s"
begin="click"
fill="freeze"
></animateTransform>
</circle>
</svg>
<svg width="500" height="500">
<rect x="100" y="100" width="300" height="200" fill="blue">
<animateTransform
attributeName="transform"
type="rotate"
from="0 100 100" <!--参考位置(100, 100)-->
to="45 100 100" <!--参考位置(100, 100)-->
dur="1s"
begin="click"
fill="freeze"
></animateTransform>
</rect>
</svg>
SVG路径动画
<svg width="500" height="500" viewBox="-100 -100 500 500">
<path d="M0 0 C0 300 300 300 300 0" stroke="red" stroke-width="2" fill="none"></path>
<rect x="0" y="0" width="40" height="40" fill="rgba(255, 0, 0, 0.5">
<animateMotion
path="M0 0 C0 300 300 300 300 0"
dur="5s"
begin="click"
fill="freeze"
rotate="auto"
></animateMotion>
</rect>
</svg>
SVG脚本编程
- SVG脚本编程注意点：
创建SVG时必须指定命名空间
const SVG_NS = "http://www.w3.org/2000/svg";
let oSvg = document.createElementNS(SVG_NS, "svg");
document.body.appendChild(oSvg);
oSvg.setAttribute("width", "500");
oSvg.setAttribute("height", "500");
document.body.appendChild(oSvg);
let oCircle = document.createElementNS(SVG_NS, "circle");
oCircle.setAttribute("cx", "100");
oCircle.setAttribute("cy", "100");
oCircle.setAttribute("r", "50");
oCircle.setAttribute("fill", "red");
oSvg.appendChild(oCircle);
使用xlink属性必须指定命名空间
const XLINK_NS = "http://www.w3.org/1999/xlink";
const XLINK_NS = "http://www.w3.org/1999/xlink";
let oImage = document.createElementNS(SVG_NS, "image");
oImage.setAttribute("x", "200");
oImage.setAttribute("y", "200");
oImage.setAttributeNS(XLINK_NS, "xlink:href", "alien.png");
oSvg.appendChild(oImage);
网友评论