可视化：svg相关基础
01.svg的嵌入.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="李可">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg的嵌入方式</title>
</head>
<body>
<h1>svg的6种嵌入方式</h1>
<!-- svg、图片、背景、iframe、object、embed 、-->
<!-- 直接写svg -->
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="100" cy="100" r="20" fill="red" />
</svg>
<!-- img -->
<img src="svg.svg" alt="">
<!-- background -->
<div style="width:200px;height:200px;display:inline-block;background-image:url('svg.svg')"></div>
<!-- iframe -->
<iframe src="svg.svg"></iframe>
<!-- embed pluginspage下插件-->
<embed src="svg.svg" width="200" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>
<!-- object codebase下插件-->
<object data="svg.svg" width="200" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"/>
</body>
</html>
运行
02.svg基本图形.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="李可">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>6种基本图形</title>
</head>
<body>
<!-- 起点 终点 对应的x，y像定位后的left top值-->
<!-- 6种基本图形line, rect, ellipse, circle, polyline, polygon-->
<!-- points'空格'或者'逗号' 像path(路径)/polyline(折线)/polygon(多边形)都用到多点（points）-->
<!-- 折线 不闭合。多边形闭合-->
<svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 线 起点 终点 -->
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>
<!-- 矩形 起点(左上角) 宽高 -->
<rect x="100" y="0" width="150" height="100"/>
<!-- 圆 中心点 半径 -->
<circle cx="300" cy="50" r="50" />
<!-- 椭圆 中心点 x y半径-->
<ellipse cx="425" cy="50" rx="75" ry="50"/>
<!-- 折线 多个点（逗号或者空格） -->
<!-- 多条线连接起来角，没有棱角 -->
<polyline points="500 0 600 50 550 100" fill='none' stroke="black" stroke-width="20"/>
<line x1="500" y1="100" x2="600" y2="150" stroke="black" stroke-width="20"/>
<line x1="600" y1="150" x2="550" y2="200" stroke="black" stroke-width="20"/>
<!-- (首尾闭合的折线) 多边形 多点（逗号或者空格） -->
<polygon points="600,0,700,50,650,100" fill='none' stroke="black" stroke-width="2"/>
</svg>
</body>
</html>
运行
03.svg基本样式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="李可">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本样式</title>
</head>
<body>
<!--
位置（x，y，r）的属性不能写到style里面，其余可以
width height rect拥有这样的属性
fill="red" 默认填充黑色色（常用transparent,none）
stroke="black" 边框色
stroke-width="2" 边框宽
-->
<!--拿circle举例子-->
<svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 圆 中心点 半径 -->
<circle cx="50" cy="50" r="50" fill="red" stroke="black" stroke-width="2"/>
<circle cx="50" cy="150" r="50" style="fill:transparent; stroke:black; stroke-width:2;"/>
</svg>
</body>
</html>
运行
04.svg用js操作.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="李可">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作svg</title>
</head>
<body>
<script>
let getTag = (name, attrs) => {
let svg = document.createElementNS('http://www.w3.org/2000/svg', name);
for (var attr in attrs) {
//这里全部使用属性，并没有使用样式
svg.setAttribute(attr, attrs[attr])
}
return svg;
}
let svg = getTag('svg', { xmlns: 'http://www.w3.org/2000/svg', 'xmlns:xlink': "http://www.w3.org/1999/xlink", version: "1.1", width: '100%', height: '100%', viewBox: "0 0 1000 1000", });
document.querySelector('body').appendChild(svg);
let line = getTag('line', { x1: 0, y1: 0, x2: 100, y2: 100, stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(line);
let rect = getTag('rect', { x: 100, y: 0,width: 150, height: 100, fill: 'none',stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(rect);
let circle = getTag('circle', { cx:"300", cy:"50", r:"50" ,fill: 'none',stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(circle);
let ellipse = getTag('ellipse', { cx:"425", cy:"50" ,rx:"75" ,ry:"50", fill: 'none',stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(ellipse);
let polyline = getTag('polyline', { points:"500 0 600 50 550 100", fill: 'none',stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(polyline);
let polygon = getTag('polygon', { points:"600,0,700,50,650,100", fill: 'none',stroke: 'green', 'stroke-width': 5 });
document.querySelector('svg').appendChild(polygon);
111
</script>
</body>
</html>
运行
05.svg结构标签g.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="李可">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js操作svg</title>
</head>
<body>
<svg width="1000" height="1000">
<!-- 圆 中心点 半径 -->
<circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="2" />
<circle cx="100" cy="100" r="60" fill="none" stroke="black" stroke-width="2" />
<circle cx="100" cy="100" r="70" fill="none" stroke="black" stroke-width="2" />
<!--
将公用的属性抽离出来赋值给g标签
但是: 标签特有的放到g标签上不起作用。
比如circle的 cx cy r line的x1
g标签内全部是circle也不能抽离cx cy r等
-->
<g stroke="black" stroke-width="2" fill="none">
<circle cx="300" cy="100" r="50" />
<circle cx="300" cy="100" r="60" />
<circle cx="300" cy="100" r="70" />
<line x1="300" y1="100" x2="400" y2="200" />
</g>
<!--
但是这些不能抽离的属性大部分是跟位置有关
使用transform变换来代替
-->
<g transform="translate(600,100)"stroke="black" stroke-width="2" fill="none">
<circle r="50" />
<circle r="60" />
<circle r="70" />
<line x1="300" y1="100" x2="400" y2="200" />
</g>
<!--
这时line是基于transform之后的距离再移动
-->
<g transform="translate(800,100)"stroke="black" stroke-width="2" fill="none">
<circle r="50" />
<circle r="60" />
<circle r="70" />
<line x1="0" y1="0" x2="100" y2="0" />
</g>
</svg>
</body>
</html>
运行
可视化：svg相关基础的更多相关文章
- 数据可视化-svg入门基础（二）
接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等. svg是(scalable vector graphic)伸缩矢量图像. 一.目录 (1)图形元素 (2)文 ...
- SVG相关学习(一)SVG基础
SVG 相关学习 SVG SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG viewBox <svg width="500" heigh ...
- iOS蓝牙开发（二）蓝牙相关基础知识
原文链接: http://liuyanwei.jumppo.com/2015/07/17/ios-BLE-1.html iOS蓝牙开发(一)蓝牙相关基础知识: 蓝牙常见名称和缩写 MFI ====== ...
- Linux 相关基础笔记
html,body { } .CodeMirror { height: auto } .CodeMirror-scroll { } .CodeMirror-lines { padding: 4px 0 ...
- linux设备驱动归纳总结（二）：模块的相关基础概念【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-59415.html linux设备驱动归纳总结(二):模块的相关基础概念 系统平台:Ubuntu 10 ...
- linux设备驱动归纳总结（一）内核的相关基础概念【转】
本文转载自:http://blog.chinaunix.net/uid-25014876-id-59413.html linux设备驱动归纳总结(一):内核的相关基础概念 xxxxxxxxxxxxxx ...
- 深入理解mysql之BDB系列（1）---BDB相关基础知识
深入理解mysql之BDB系列(1) ---BDB相关基础知识 作者:杨万富 一:BDB体系结构 1.1.BDB体系结构 BDB总体的体系结构如图1.1所看到的,包括五个子系统(见图1.1 ...
- SVG的基础使用
SVG的基础使用: <%@ page language="java" contentType="text/html; charset=UTF-8" pag ...
- 【RAC】RAC相关基础知识
[RAC]RAC相关基础知识 1.CRS简介 从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...
随机推荐
- nginx笔记4-负载均衡带来的问题以及解决办法
接着笔记3,将笔记三的改造一下,现在分别启动两个Tomcat,在页面获取session.如图所示: tomcat2的session: tomcat1的session: 根据上图发现,每个tomcat取 ...
- ReferenceError: Error #1065: 变量 dataGridArray 未定义
1.错误描述 ReferenceError: Error #1065: 变量 dataGridArray 未定义. at global/flash.utils::getDefinitionByName ...
- 电脑中安装多个jdk，eclipse的选择！
以前自己写java程序的时候,没有用到什么高级的东西,所以没咋关注eclipse中jdk的版本问题: 但是随着学习的深入,难免会用到别人的项目,那么在导入别人的项目过程中就会发现时长有问题,而很多情况 ...
- Angular21 动态绑定CSS样式
1 需求 在前端开发中通常需要动态对某些元素的样式进行动态设定,传统的CSS绑定分为CSS类绑定和Style样式绑定:在Angular中利用相关指令同样可以完成CSS类绑定和CSS样式绑定 2 内置指 ...
- dom文档对象模型图
- 前端测试框架对比(js单元测试框架对比)
前端测试框架对比(js单元测试框架对比) 本文主要目的在于横评业界主流的几款前端框架,顺带说下相关的一些内容. 测试分类 通常应用会有 单元测试(Unit tests) 和 功能测试(Function ...
- 用winscp从本地上传文件到服务器上出现复制文件到远端时错误。
用winscp从本地上传文件到服务器上出现复制文件到远端时错误. 错误码:4 服务器返回的错误消息:write failed 报错如下图所示: 分析过程: 1.刚开始以为是权限不够,后面上网查了一下是 ...
- 通过JDBC连接数据库（MySql为例）并读取数据库信息--JSP基础
1.先建数据库,数据库名为:employee_DB;然后在数据库employee_DB下建表,表名为employee;最后插入数据. create database employee_DB; use ...
- Struts2【拦截器】就是这么简单
什么是拦截器 拦截器Interceptor.....拦截器是Struts的概念,它与过滤器是类似的...可以近似于看作是过滤器 为什么我们要使用拦截器 前面在介绍Struts的时候已经讲解过了,Str ...
- es6中一些基本的使用方法
es6中一些基本的使用方法 const 定义常量 let 块级变量 用let定义的变量只在块当中起作用,离开变量外界的块(括号)就会被销毁. 模板字面量 用于字符串拼接和写模板,使用 ` (反引号,左 ...