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啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
随机推荐
- HihoCoder第十二周:刷油漆
#1055 : 刷油漆 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球 ...
- @echo off命令
在C盘下新建一个文本文档,将名字改为1.bat. 打开/编辑,输入call cmd.cmd是命令提示符.运行该文件,出现命令提示符窗口,在该窗口下可以运行各种命令.由图1.1可见,在第一行显示C:\ ...
- MySQL5.7忘记密码解决方案
第一种方法 首先是网上普遍见到的 关闭服务 windows下在C:\ProgramData(隐藏文件夹)\MySQL\MySQL Server 5.7\my.ini中的[mysqld]下添加skip- ...
- Python 加载mnist、cifar数据
import tensorflow.examples.tutorials.mnist.input_data mnist = input_data.read_data_sets("MNIST_ ...
- 使用SSH工具连接WSL
简单记录下操作过程 我在微软应用商店下载了Ubuntu 18.04 LTS.但是Windows的命令行太丑,我打算使用SSH工具连接WSL,输入密码一直拒绝连接... 查找资料之后解决了这个问题 双击 ...
- Tornado中的Cookie设置
Tornado中的cookie分为两种--普通cookie和安全cookie 普通cookie 1.创建cookie 原型 self.set_cookie(name, value, domain=No ...
- 【LeetCode】160. 相交链表
题目 输入两个链表,找出它们的第一个公共节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 1: 输入:intersectVal = 8, listA = [4,1,8,4,5], listB ...
- 【Android】家庭记账本手机版开发报告二
一.说在前面 昨天 完成了对记账本的账单的增删 今天 完善昨天的框架结构( 1.引入ViewModel管理数据.使MainActive 只管理界面.不再管数据了 2.引入AsyncTask.后台执行. ...
- 【Vue中的坑】Vue打包上传线上报Uncaught SyntaxError: Unexpected token <
今天在vue打包上传线上后,报一下错误,一下就懵了,这可咋整啊,一如既往的想都没想就开始复制错误,上网开搜 Uncaught SyntaxError: Unexpected token < Un ...
- 【LeetCode】子集
[问题]给定一组不含重复元素的整数数组 nums,返回该数组所有可能的子集(幂集).说明:解集不能包含重复的子集. 示例: 输入: nums = [,,] 输出: [ [], [], [], [,,] ...