svg用例
圆
<circle cx="x" cy="y" r="r" style="stroke:black;fill:none">
线 x1 y1 一个点 x2 y2 第二个点
<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;">
<line x1="75" y1="95" x2="135" y2="85" style="stroke:black;">
折线
<polyline points="168 62,98 10,78 45,50 10,32 62">
//
<polyline points="15 110,45 120,95 120,105 110">
. .
......
移动到(75,90)直线到(65,90)椭圆x=5 y=10椭圆回到(75,90)
<path d="M 75 90 L 65 90 A 5 10 0 0 0 75 90">
.......
. .
. .
. .
矩形 左上角x y
<rect x="10" y="10" height="100" width="100"
stroke="red" fill="green" stroke-width="2"/>
虚线
{stroke-dasharray:73;} ----- 7比3 虚线
<use>
<use xline:href="#g便签id" x="" y="">
格式:"0 0 2050 1000",--->(ULCx ULCy UUwidth UUheight)
ULCx 与 ULCy 分別代表「左上角 x」与「左上角 y」。UUwidth 与UUheight 分別代表「使用者单位宽度」与「使用者单位高度」
<script type="text/ecmascript" a3:scriptImplementation="Adobe">
<![CDATA[
function changeColor(evt)
{
var rect = evt.target;
rect.setAttributeNS(null, "fill", "blue")
}
]]></script>
<rect x="5" y="5" width="40" height="40"
fill="red"
onclick= "changeColor(evt)"/>
</svg>
①②③ //放大缩小变换 coverage
var svg = document.getElementById("coverage_0");
var svgPanel = document.getElementById("coverage_1");
var gridSvg = document.getElementById("coverage_2");
var width = 800;
var height = 400;
var gridLength = 20;
var scale = 1;
svg.setAttribute("width", width);
svg.setAttribute("height", height);
drawGrid(gridSvg, width, height, gridLength);
//绑定鼠标滑轮事件
if (document.addEventListener) {
document.addEventListener('DOMMouseScroll', scrollZoom, false);
}
window.onmousewheel = document.onmousewheel = scrollZoom;
function drawGrid(svgBackground, winWidth, winHeight, gridLength) {
var childs = gridSvg.childNodes;
for (var i = childs.length - 1; i >= 0; i--) {
svgBackground.removeChild(childs.item(i));
}
for (var i = 0, len = Math.ceil(winWidth / gridLength); i <= len; i++) {
var attrs = {
x1: i * gridLength,
y1: 0,
x2: i * gridLength,
y2: winHeight,
stroke: "#ddd"
};
var line = resetSVG("line", attrs);
svgBackground.appendChild(line);
};
for (var i = 0, len = Math.ceil(winHeight / gridLength); i <= len; i++) {
var attrs = {
x1: 0,
y1: i * gridLength,
x2: winWidth,
y2: i * gridLength,
stroke: "#ddd"
};
var line = resetSVG("line", attrs);
svgBackground.appendChild(line);
};
}
function resetSVG(tag, attrs) {
var element = document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs) {
element.setAttribute(k, attrs[k]);
}
return element;
}
/**
* svg放缩
* {Float} num 放缩的倍数
*/
function zoom(num) {
scale *= num;
svgPanel.setAttribute("transform", "scale(" + scale + ")");
drawGrid(gridSvg, width * (1 / scale), height * (1 / scale), gridLength);
}
/**
* 滑轮滚动处理事件,向上滚放大
* {Object} e 事件对象
*/
function scrollZoom(e) {
e = e || window.event;
//e.detail用来兼容 FireFox
e.wheelDelta > 0 || e.detail > 0 ? zoom(1.1) : zoom(0.9);
}
// 放大缩小变换,END
六 坐标变换
transform="scale(value)" x y 都乘以value
transform="scale(x-value,y-value)" x y 都乘以x-value
scale
十二章 动画
<animate attributeName="要变化的属性" attributeType="XML" from="1" to"0.75" begin="3s" dur="3s" fill="freeze">(可多个animate并写)
attributeName="fill" from="red" to="green"
attributeType="XML" (CSS)
fill="freeze" // 动作完成后冻结,移除fill属性会回到开始状态(默认remove属性)
begin="id.begin+3s" //上个动画的id加时间
路径 动画
<path d="M15 50 Q 48 15,50 50,65 32,100 40" style="transform="translate(0,50)"">
<animate attributeName="d" attributeType="XML" to="M50 15 Q 15 48,50 50,32 65,40 100" begin="" dur="" fill="freeze"/>
</path>
告警信息
<image id="greentow" xlink:href="选中点亮.png" x="-70" y="258" style="display:none" />
<image id="greenone" xlink:href="选中点亮.png" x="-310" y="258" style="display:block" />
//文字动画
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<path id="path"
d="M20,20 Q50,60 80,140 T340,100"
stroke="red"
fill="none"
color=""
/>
<text style="color:red;">
<textPath id="textPath" xlink:href="#path" stroke="red" style="color:red;">蚂蚁部落欢迎您</textPath>
</text>
<animate xlink:href="#textPath"
attributeName="startOffset"
from="0%" to="100%"
begin="0s"
dur="5s"
repeatCount="indefinite"
keyTimes="0;1"
calcMode="spline"
keySplines="0.1 0.2 .22 1"/>
</svg>
路径
<path d="M250 150 L150 350 L350 350 Z" />
M = moveto 移动到M250 150
L = lineto 直线L150 350
H = horizontal lineto 水平
V = vertical lineto 垂直
C = curveto 曲线
S = smooth curveto 光滑曲线
Q = quadratic Belzier curve二次函数
T = smooth quadratic Belzier curveto
A = elliptical Arc 省略
Z = closepath 结束
svg用例的更多相关文章
- SVG DOM常用属性和方法介绍(1)
12.2 SVG DOM常用属性和方法介绍 将以Adobe SVG Viewer提供的属性和方法为准,因为不同解析器对JavaScript以及相关的属性和方法支持的程度不同,有些方法和属性是某个解析 ...
- o'Reill的SVG精髓(第二版)学习笔记——第十二章
第十二章 SVG动画 12.1动画基础 SVG的动画特性基于万维网联盟的“同步多媒体集成语言”(SMIL)规范(http://www.w3.org/TR/SMIL3). 在这个动画系统中,我们可以指定 ...
- o'Reill的SVG精髓(第二版)学习笔记——第十章
10.1 裁剪路径 创建SVG文档时,可以通过制定感兴趣区域的宽度和高度建立视口.这会变成默认的裁剪区域,任何绘制在该范围外部的部分都不会显示.你也可以使用<clipPath>元素来建立自 ...
- Vue3 使用 svg-sprite-loader 实现 svg 图标按需加载
前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入: https://www.cnblogs.com/Leophen/p/13201 ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- Gazebo機器人仿真學習探索筆記(四)模型編輯
模型編輯主要是自定義編輯物體模型構建環境,也可以將多種模型組合爲新模型等,支持外部模型導入, 需要注意的導入模型格式有相應要求,否在無法導入成功, COLLADA (dae), STereoLitho ...
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- 玩转HTML5移动页面(动效篇)
为一名前端,在拿到设计稿时你有两种选择: 快速输出静态页面 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些 ...
- 转:玩转HTML5移动页面(动效篇)
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
随机推荐
- 降维之奇异值分解(SVD)
看了几篇关于奇异值分解(Singular Value Decomposition,SVD)的博客,大部分都是从坐标变换(线性变换)的角度来阐述,讲了一堆坐标变换的东西,整了一大堆图,试图“通俗易懂”地 ...
- python计算:pi/4=1-1/3+1/5-1/7+…
当有一项的绝对值小于10e-6停止计算 def cul() : ans = 0;add = 1 sign = 1 while(1/add>10**(-6)) : ans = ans + sign ...
- JAVA-数据类型-复习
JAVA-数据类型-复习 Java中,一共有8种数据类型,4种整型,2种浮点型,1种用于表示Unicode编码的字符单元的字符类型char,1种布尔类型. 整型 类型 存储需求(字节)一个字节包含8个 ...
- HDU_4939 stupid tower defense 2014多校7 多变量型DP
意思是有个塔防游戏,有三种塔,红塔在怪物经过的时候每秒会产生攻击力大小的伤害,绿塔对怪物经过以及经过之后每秒产生攻击力大小的伤害,还有种蓝塔,对怪物进行减速,即怪物从此之后经过一个单位都会减慢c秒 最 ...
- Essay写作观点的打造
很多留学生在Essay写作过程中经常出现的问题就是缺乏对于已有知识的新的理解,只是单纯在做文献综述(literature review)而已.要怎么样才能够体现自己的理解和自己的观点,便是今天我们讲解 ...
- 转载:Nginx做反向代理和负载均衡时“X-Forwarded-For”信息头的处理
转载自:https://blog.51cto.com/wjw7702/1150225 一.概述 如今利用nginx做反向代理和负载均衡的实例已经很多了,针对不同的应用场合,还有很多需要注意的地方,本文 ...
- Glusterfs volume 的三种挂载方式
在上一篇中我们介绍了Glusterfs在CentOS7上的安装,并且提到Glusterfs client端有三种:Native client,NFS,Samba, 今天我们就来一起学习下这三种方式. ...
- 本地登录ftp的时候报530错误
root@instance-iyi104bj:~# ftp localhost Connected to localhost. (vsFTPd ) Name (localhost:root): roo ...
- POJ 1050:To the Max
To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43241 Accepted: 22934 Desc ...
- 2018出炉50道iOS面试题
基础: 1.如何令自己所写的对象具有拷贝功能? 若想令自己所写的对象具有拷贝功能,则需实现 NSCopying 协议.如果自定义的对象分为可变版本与不可变版本,那么就要同时实现 NSCopying与 ...