svg
关注
分享
扫一扫
anITfish
“学不可以已，怕什么真理无穷，进一寸有一寸的欢喜”
展开
-
SVG学习——10.静态环比图的实现
效果如图 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>啦啦啦</title> <style> #div1 { width:400px; height:400px; background:white; } body { background:black; }原创 2020-08-10 12:32:15 · 290 阅读 · 0 评论 -
SVG学习——9.path路径
path路径 一、path d属性： M 开始坐标写两个数字 L 中间坐标写两个数字 H 水平坐标写一个数字 V 垂直坐标写一个数字 A 绘制弧形 Z 结束标志 C S Q T 二、大小写 大写 绝对坐标 小写 相对坐标（长度） <div id="div1"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" > <!-- <path d="M50,100 L原创 2020-08-09 21:14:19 · 587 阅读 · 0 评论 -
SVG学习——8.鼠标点击连点成线
效果如图 感言：蛮好玩的，就是记不住学不会！ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>啦啦啦</title> <style> #div1 { width:400px; height:400px; background:white; } body { b原创 2020-08-09 20:52:39 · 772 阅读 · 0 评论 -
SVG学习——5.创建元素
创建元素 1.createElementNS 两个参数 命名空间，标签名 在<head>标签里面添加 <script> <!--svg中创建标签的方法--> window.onload=function(){ var svgNS='http://www.w3.org/2000/svg'; var oParent=document.grtElementById('div1'); var oSvg=document.createElementNS(svgNS,原创 2020-08-09 19:59:22 · 686 阅读 · 0 评论 -
SVG学习——7.实现圆线等的动态交互
拆开来一步一步倒不复杂，但是整体看好复杂呀 实现效果： 鼠标移到线或圆上，圆弹性变化，线变色 <!DOCTYPE html> <html> <head> <title></title> <style> #div1 {width:780px; height:400px; background:url(img/bg.jpg) no-repeat; margin:20px auto; overflow:hidden; } body {ba原创 2020-08-09 15:33:49 · 272 阅读 · 0 评论 -
SVG学习记录目录
SVG学习——1.引入SVG的方式 SVG学习——2.SVG基本图形 SVG学习——3.标签 SVG学习——4.成组绘图 SVG学习——5.实现圆与中心圆连接原创 2020-08-09 14:20:48 · 153 阅读 · 0 评论 -
SVG学习——6.实现圆与中心圆连接
跟着视频做的，对方数据是车子。我随便改了一下，要贴合最近的心情。 效果图如下： 代码如下： <!DOCTYPE html> <html> <head> <title></title> <style> #div1 {width:780px; height:400px; background:url(img/bg.jpg) no-repeat; margin:20px auto; overflow:hidden; } body {bac原创 2020-08-09 14:18:02 · 321 阅读 · 2 评论 -
SVG学习——4.成组绘图
<!DOCTYPE html> <html> <head> <title>标题</title> <style> #div1 {width:780px; height:400px; background:url(img/bg.jpg) no-repeat; margin:20px auto; overflow:hidden; } body {background:black; } </style> <script>原创 2020-08-09 11:06:13 · 201 阅读 · 0 评论 -
SVG学习——3.标签
1.<g>标签 是一个容器（分组）标签，用来组合元素的。整体样式设置，还可以加id=“g1”。 <!--直接写svg的方法--> <div id="div1"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <g transform="translate(200,200)" stroke-width="1" stroke="red">原创 2020-08-09 10:35:55 · 392 阅读 · 0 评论 -
SVG学习——2.SVG基本图形
以下内容都是直接在html文件的body里的 一、圆circle <div id="div1"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> <circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle> </svg> </d原创 2020-08-08 21:20:10 · 321 阅读 · 0 评论 -
SVG学习——1.引入SVG的方式
方式有两种，包括：写在外部文件，和直接写在html文件里面。 一、写在外部文件 【svg文件】 记事本新建svg1.svg，内容为 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/sv原创 2020-08-08 18:40:46 · 1771 阅读 · 0 评论