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 · 263 阅读 · 0 评论 -
SVG学习——9.path路径
path路径一、pathd属性:M 开始坐标写两个数字L 中间坐标写两个数字H 水平坐标写一个数字V 垂直坐标写一个数字A 绘制弧形Z 结束标志CSQT二、大小写大写 绝对坐标小写 相对坐标(长度)<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 · 508 阅读 · 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 · 714 阅读 · 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 · 631 阅读 · 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 · 234 阅读 · 0 评论 -
SVG学习记录目录
SVG学习——1.引入SVG的方式SVG学习——2.SVG基本图形SVG学习——3.标签SVG学习——4.成组绘图SVG学习——5.实现圆与中心圆连接原创 2020-08-09 14:20:48 · 120 阅读 · 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 · 293 阅读 · 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 · 174 阅读 · 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 · 313 阅读 · 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 · 278 阅读 · 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 · 1673 阅读 · 0 评论