https://blog.csdn.net/weixin_34133829/article/details/91749330circle 圆
fill 填充 值:颜色
cx 中心x轴, cy 中心Y轴, r 圆半径
stoke 描边 值:颜色
stroke-width 描边宽度 值:数字
stroke 描边 值:颜色
rect 矩形
height 高 值:数字
width 宽 值:数字
fill 填充 值:颜色
stroke 描边 值:颜色
stroke-width 描边 宽度 值:颜色
x,y 矩形左上角的X轴Y轴位置 值:数字
rx,ry 矩形X轴与Y轴的圆角 值:数字，当只有一个值时，X轴Y轴圆角一致。
x1,y1 起点位置 值:数字
x2,y2 终点位置 值:数字
stroke-width 直线宽度 值:数字
stroke-opacity 透明度 值:数字0-1
注意: line直线只有stroke，没有fill。
text 文本
font-size 文本大小 值:数字 单位:rem，em，px，默认px
x，y 开始绘制文本的X轴与Y轴位置 具体由text-anchor属性决定。
text-anchor 文本水平对齐方式 值:start 开始位置， middle 中心位置，end 末尾位置
image 图片
width height 宽高 值:数字
x,y 图片左上角位置 值:数字
xlink:href 图片路径 值:字符串
clip-path 裁剪路径 值:半径
stroke-opacity 描边透明度 值:数字0-1
fill-opacity 填充透明度 值:数字0-1
clip-path 裁剪路径 第一个值 形状半径。
折线 polyline
points 位置 值 数字，points=x1,y1 x2,y2 ...,如:points=0 100 200 200，0 100表示第一个点，200 200表示第二个点。
多边形 polygon
属性与折线差不多，只不过多边形会闭合路径。
path 路径
d 属性
M开辟新路径 值:x，y L路劲连接 值:x，y
Z闭合路径 无值
H 水平路径 x值 ，V垂直路径 Y值
M L Z H 与 m l z h 区分大小写 ，绝对位置与相对位置。
A 属性 ，A属性是d属性里的一个子属性。
- x,y 半径
- 角度
- 弧长
○ 0 小弧， 1 大弧。
- 方向
○ 0 逆时针， 1 顺时针。
- 结束点，x，y。
//创建元素
createElementNs
两个参数
命名空间、标签名
例如： window.onload = function(){
var svgNS = 'https://www.aaa.vom/svg';
var oParent = document.getElementById('div')
var oSvg = document.createElementNS(svgNS, 'svg');
oSvg.setA
}
//微信之中支持的标签
additive="sum" accumulate="sum"
additive：该属性控制动画是否是叠加的。
sum——动画将添加到属性和其他较低优先级动画的基础值。
replace——动画将覆盖属性和其他较低优先级动画的基础值。这是默认的，但是其行为也受到动画值属性by和to的影响，参照SMIL Animation: How from, to and by attributes affect additive behavior。
以下元素可以使用该additive属性
<animate>
<animatecolor>
<animatemotion>
<animatetransform>
accumulate（积累)：该属性控制动画是否是累积的（即基于以前的结果）。
对于重复的动画来说，建立在以前的结果上是很有用的，每次迭代都会累积起来。如果在每次迭代中某个值会被添加到先前的动画属性的值，则该属性会告知动画。
sum——指定在第一次迭代之后的每个重复迭代基于先前迭代的最后一个值。
none——指定重复迭代不是累积的。这是默认的值。
以下元素可以使用additive属性
<animate>
<animatecolor>
<animatemotion>
<animatetransform>
restrat="never" 只能触发一次，安卓使用有用-
pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。
-
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。
-
none——元素永远不会成为鼠标事件的target（目标）。但是，当其后代元素的
pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默
认就可以穿透当前层，因为pointer-events默认为auto
一个图形有两部分组成，一部分是轮廓线，另一部分是填充；轮廓线通过 stroke 完成，填充通过 fill 完成；
visiblePainted
该属性值等价于 auto ； 当 svg 中的某个元素可见，并且当其 fill 不是 none 时，点击填充部分，该事件能够被捕捉到，当其 stroke 不是 none 时，点击轮廓部分，该事件能够被捕捉到；
<svg style="pointer-events:visiblePointed;">
<circle cx="30" cy="30" r="20" stroke="black" stroke-width="10"
fill="red" onclick="alert('circle')" />
</svg> foreignObject 作用
<foreignObject>元素的作用是可以在其中使用具有其它XML命名空间的XML元素，换句话说借助<foreignObject>标签，我们可以直接在SVG内部嵌入XHTML元素，举个简单的例子：
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p>文字。</p>
</body>
</foreignObject>
</svg>
可以看到<foreignObject>标签里面有一个设置了xmlns="http://www.w3.org/1999/xhtml"命名空间的<body>标签，此时<body>标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。
运用：可以实现文本的自动换行
<svg xmlns="http://www.w3.org/2000/svg">
<foreignObject width="120" height="50">
<body xmlns="http://www.w3.org/1999/xhtml">
<p style="font-size:12px;margin:0;">一段需要word wrap的文字。</p>
</body>
</foreignObject>
</svg>反之也可以在svg的标签之中插入新的svg引入的背景图片：例如
<g id="bj">
<foreignObject x="0" y="0" width="750" height="1300">
<svg style="display: inline-block;width: 100%;vertical-align: top;background-position: 0% 0%;background-repeat: no-repeat;background-size:100% 100%;background-attachment: scroll;background-image: url(./img/02.jpg);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;" viewBox="0 0 750 1300">
</svg>
</foreignObject>
</g>页面上的DOM元素轻松变成图片，原理是
- 获取对应DOM元素的
outerHTML代码； - 放在
<foreignObject>元素中； - 图片方式显示我们的SVG图形，例如：
<img width="300" height="150" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"> <foreignObject width="120" height="50"> <body xmlns="http://www.w3.org/1999/xhtml"> <p style="font-size:12px;margin:0;">一段需要word wrap的文字。</p> </body> </foreignObject> </svg>'> - 上一步的图片本质还是SVG，我们可以借助
canvasdrawImage()方法将图片放在画布上，然后使用canvas.toDataURL()方法转换成png或jpg图片，核心代码：var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.drawImage(img, 0, 0); img.src = canvas.toDataURL('image/png');
一旦我们可以把DOM元素转换成图片，我们就可以轻轻松松配合JS在前端实现网页截图功能。
calcmode: 该属性指定动画的插值模式。默认的模式是线性的，但是如果属性不支持线性插值（例如对于字符串），calcMode则忽略该属性并使用离散插值。
discrete——指定动画函数将从一个值跳到下一个值，而不进行任何插值。(例如抽签等动画可以使用)
linear——值之间的简单线性插值用于计算动画函数。除了<animatemotion>之外，这是默认值。
paced——插值可在整个动画中产生均匀的变化速度。这只支持定义线性数值范围的值，并且可以计算点与点之间的“距离”的一些概念（例如位置，宽度，高度等）。如果指定了paced，则任何keyTimes或keySplines将被忽略。因为对于<animatemotion>，这是默认值。
spline—— 插值根据由三次Bézier样条曲线定义的时间函数从values列表中的一个值插入到下一个值。样条曲线的点在keyTimes属性中定义，每个区间的控制点在keySplines属性中定义。
<!--
以下按钮的响应时间
tap:在不同的情况下会失效
touch:0s 不需要响应时间 touchstart、touchmove、touchend
click:2.5s-0.3s
利用touch和click就能够实现双重触发，顶层用touch，底层用click触发
-->
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" xml:space="preserve">
<g id="底层">
<!-- 可以直接在g标签之中添加可见到不可见的动画 ms是毫秒的意思
<set attributeName="visibility" from="visible" to="hidden" begin="touchstart" dur="1000s"></set>
如果遇到多个动画一起，比如小车需要遇到文字的时候出现文字炸裂的效果，则需要用keytimes与values的值一一绑定来做
<animateFransform attributeName="transform" type="translate" additive="sum" begin="touchstart" fill="freeze" calcMode="discrete" dur="10s" keyTimes="0;0.8;;0.9" values="-1000 0;-1200 0;-1400 0"></animateFransform> -->
<animate attributeName="opacity" begin="click" values="1;0;1" repeatcount="indefinite" fill="freeze" dur="2s"></animate>
<rect x="153.6" y="127.2" fill="#9DCE8B" width="415.6" height="293.8"/>
</g>
<g id="顶层">
<set attributeName="visibility" form="visible" to="hidden" begin="touchstart" dur="100ms"></set>
<animateTransform attributeName="transform" type="translate" values="0 0;-245 0;"dur="2s" begin="touchstart" fill="freeze"></animateTransform>
<rect x="30.1" y="174.9" fill="#A83D3C" width="331.3" height="198.4"/>
</g>
</svg>-webkit-tap-highlight-color:transparent;
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮，设置颜色的alpha值为0即可。
示例：设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);
浏览器支持: 只有iOS(iPhone和iPad).
-webkit-user-select:none;
选中文字后无法进行松开释放拖拽，采用-webkit-user-select:none;
控制动画延缓出现
<animate attributeName="opacity" begin="click+1.2" dur="1000s" values="1;0;0" keyTimes="0;0.0001;1" fill="freeze" restart="whenNotActive"></animate>
<animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.5 0 0.4 0.4; 0.5 0 0.4 0.4" keyTimes="0;0.0035;1" values="100;4000;4000" dur="3000s" begin="click+1.2"></animate>触发时间差双重触发和多位图切换会有一个时间差的延迟，比如顶层用了touch之后click之后是需要+多少秒来进行触发的，多位图切换也是实现一个点击切换的过程，点击切换如果不增加时间的延迟是需要进行两次点击的。
遇到需要点击切换下一张首页动画图的时候使用animateTransform通过位移绑定values的位置来进行实现没有时间延迟，比较合适。上代码：
<section style="pointer-events: none;display: block;background-position: 0% 0%;">
<svg style="height: 720px; vertical-align: top;width: 100%;" xmlns="http://www.w3.org/2000/svg" >
//与内页的高度绑定，点击缓慢出现第二页的内容
<animate attributeName="opacity" begin="click+1.2s" dur="1000s" values="1;0;0" keyTimes="0;0.0001;1" fill="freeze" restart="whenNotActive"></animate>
<animate attributeName="height" fill="freeze" restart="never" calcMode="spline" keySplines="0.5 0 0.4 0.4; 0.5 0 0.4 0.4" keyTimes="0;0.0035;1" values="100;4000;4000" dur="3000s" begin="click+1.2s"></animate>
//遮挡内页的内容
<rect x="0" y="0" width="650" height="12800" fill="#fff">
</rect>
<g id="bj">
//点击进行平移切换
<animateTransform attributeName="transform" type="translate" values="-1000;0" begin="click" repeatcount="indefinite"></animateTransform>
<g id="s-01" transform="translate(0 0)">
<foreignObject x="0" y="0" width="100%" height="1807" >
<svg style="display: inline-block;width: 100%;vertical-align: top;background-image: url(img/s-01.gif); background-position: 0% 0%; background-repeat: no-repeat;background-size: cover;background-attachment: scroll;-webkit-tap-highlight-color: transparent;-webkit-user-select: none;pointer-events: auto;" viewBox="0 0 640 1280" opacity="1" additive="sum">
</svg>
</foreignObject>
</g>
<g id="s-02" transform="translate(1000 0)">
<foreignObject x="0" y="0" width="100%" height="1807" >
<svg style="display: inline-block;width: 100%;vertical-align: top;background-image: url(img/s-02.gif); background-position: 0% 0%; background-repeat: no-repeat;background-size: cover;background-attachment: scroll;-webkit-tap-highlight-color: transparent;-webkit-user-select: none;pointer-events: auto;" viewBox="0 0 640 1280" opacity="1" additive="sum">
</svg>
</foreignObject>
</g>
//穿透触发，盖上一层矩形，点击消失
<rect style="pointer-events: painted;" x="0" y="0" width="640" height="1280" opacity="0">
<set attributeName="visibility" from="visible" to="hidden" begin="click"></set>
</rect>
</g>
</svg>
</section>
1569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
