[ { "path": "README.md", "content": "# SVG 奇思妙想 \n使用 `SVG` 标签或是CSS属性 `clip-path` 创建的图形\n\n| Demo link | Description |\n| ------| ------ | \n| [SVG奇思妙想](http://chokcoco.github.io/demo/svg/html/index.html) | 使用 `SVG` or `clip-path` 创建的图形 | \n| [CSS奇思妙想](http://chokcoco.github.io/magicCss/html/index.html) | CSS3奇思妙想，单标签实现各类图形 |\n\n由于部分图形使用了 `clip-path` ，兼容性问题，请使用 Chrome 浏览器浏览。\n\n## 使用`svg` 绘制各类统计图形\n\n使用 svg 标签绘制各类百分比图、饼图、loading 图。\n\n#### loading 图\n![loading 图](https://github.com/chokcoco/SVG/blob/master/static/images/1.gif)\n\n#### 饼图\n![饼图](https://github.com/chokcoco/SVG/blob/master/static/images/2.gif)\n\n#### 百分比图\n![百分比图](https://github.com/chokcoco/SVG/blob/master/static/images/3.gif)\n\n 　![百分比图](https://github.com/chokcoco/SVG/blob/master/static/images/4.gif)\n\n## License\nMIT\n" }, { "path": "html/index.html", "content": "\r\n\r\n\r\n\t\r\n\t\r\n\t\r\n\tSVG奇思妙想\r\n\t\r\n\t\r\n\t\r\n\r\n\r\n\t

SVG奇思妙想，使用SVG实现各类图形

\r\n\t\r\n\t\t\r\n\t
\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t圆形\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\tSVG多边形\r\n\t\t\t\thover、active 可变换效果\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\tSVG多边形自由切换动画\r\n\t\t\t\tSVG动画的前提是，确定最终形状的点的数目，必须和初始形状的点的数目一样\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t气泡对话框\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\tClose icon\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\tstar\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\ttriangle2rect\r\n\t\t\t\tclip-path 图形\r\n\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG PATH 绘制的矩形\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG PATH 绘制平滑曲线\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t本曲线使用二次贝塞尔曲线生成\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG PATH 绘制平滑曲线\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t本曲线使用三次贝塞尔曲线生成\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG PATH 绘制平滑曲线，用于文字效果\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t可以让文字跟随 SVG 路径做出各种形状\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t这是一段随着path路径绘制的文字\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t这是另一段随path路径绘制的文字\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG 绘制的文字阴影效果\r\n 使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内\r\n 运用了大量 SVG 滤镜\r\n
\r\n \r\n \r\n \r\n \r\n \r\n\r\n SVG filter & mask\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG 绘制的文字故障效果\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内\r\n\t\t\t\t运用了大量 SVG 滤镜\r\n\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\tAmazing SVG\r\n\t\t\t\t\t\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG 绘制的文字在水下的效果（textUnderWater）\r\n 使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内\r\n 运用了大量 SVG 滤镜\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n textUnderWater\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG stroke 虚线效果，绘制文字边框动画\r\n 使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n 改变 SVG 元素的虚线效果生成补间动画\r\n
\r\n \r\n \r\n \r\n
HOVER ME
\r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG stroke 虚线效果，绘制的线条动画\r\n 使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG stroke 虚线效果，绘制的线条动画\r\n 绘画内容在 svg 标签内（刷新查看动画）\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG stroke 虚线效果，绘制 loading 图\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t 改变 SVG 元素的虚线效果生成补间动画\r\n \t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG PATH 绘制饼图\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t点击饼图查看动画过渡效果！\r\n\t\t\t\t
\r\n\t\t\t\t\t
75%
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG 绘制百分比图\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t使用了 SVG 动画 animate\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t50.0%\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG 绘制可调节数值百分比图\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t使用原生JS控制svg百分比，并生成动画，刷新页面观看动画\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t50.0%\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\r\n\t\t\r\n\t\t
\r\n\t\t\t
\r\n\t\t\t\t使用 SVG 绘制莲花图\r\n\t\t\t\t使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t \r\n \r\n \r\n \r\n \r\n\t\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t
\r\n\t\t\t\r\n\t\t\t\r\n\t\t
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG 绘制风车\r\n 使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n\r\n \r\n
\r\n
\r\n 使用 SVG 绘制 360 极速浏览器图标\r\n 使用审查元素看看 html 结构，绘画内容在 svg 标签内\r\n
\r\n \r\n \r\n \r\n \r\n d\r\n \r\n
\r\n
\r\n \r\n \r\n
\r\n\t
\r\n\r\n\t
\r\n\t\t因部分图案使用 clip-path，兼容性不佳，建议使用高版本 Chrome 内核浏览器观看。\r\n\t
\r\n\t\r\n\r\n\r\n\r\n" }, { "path": "static/css/index.css", "content": ".container{\r\n width: 100%;\r\n position: relative;\r\n z-index:100;\r\n}\r\n#tips{\r\n display:none;\r\n width:470px;\r\n height:60px;\r\n position:fixed;\r\n top:0;\r\n left:0;\r\n bottom:0;\r\n right:0;\r\n margin:auto;\r\n padding:50px;\r\n font-size:24px;\r\n background-color:#fff;\r\n color:#333;\r\n border:5px solid deeppink;\r\n z-index:9999;\r\n cursor:pointer;\r\n box-shadow:0 0 0 1000px rgba(0,0,0,.5);\r\n text-align:center;\r\n}\r\n.code-wrap{\r\n width: 100%;\r\n border-top: 1px solid #e6e6e6;\r\n border-bottom: 1px solid #e6e6e6;\r\n height:400px;\r\n margin-bottom:10px;\r\n position:relative;\r\n}\r\n.css-live-wrap{\r\n position:relative;\r\n width:50%;\r\n height:100%;\r\n float:left;\r\n}\r\n\r\n.code,.jscode{\r\n width: 50%;\r\n height:100%;\r\n box-sizing: border-box;\r\n font-size:14px;\r\n background: #ffe;\r\n display: block;\r\n float: right;\r\n padding: 1em;\r\n font-family: Consolas, Monaco, monospace;\r\n white-space: pre;\r\n color:#333;\r\n /* text-shadow: 0 1px 1px white; */\r\n overflow-y:scroll;\r\n}\r\nsummary{\r\n position:absolute;\r\n cursor:default;\r\n left:0;\r\n color: #999;\r\n font-size: 14px;\r\n line-height:18px;\r\n margin: 20px 0 0 20px;\r\n border-left: 2px solid #FF9800;\r\n padding: 0 10px;\r\n text-shadow: 0 0.2px hsl(0,0%,85%);\r\n /* background: linear-gradient(#FF9800, #FF9800) no-repeat; */\r\n background-size: 100% 1px;\r\n background-position: -400px bottom;\r\n transition:.5s;\r\n}\r\n\r\nsummary:nth-child(2){\r\n margin-top:60px;\r\n}\r\n\r\nsummary:nth-child(3){\r\n margin-top:100px;\r\n}\r\n\r\n" }, { "path": "static/css/reset.css", "content": "@charset \"utf-8\";\r\n\r\n/*CSS reset*/\r\nhtml {\r\n\toverflow-x: hidden;\r\n\toverflow-y: auto;\r\n\tcolor: #333;\r\n\tfont-size: 62.5%;\r\n\tfont-family: Microsoft Yahei,simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;\r\n}\r\nbody, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {\r\n\tmargin: 0;\r\n\tpadding: 0\r\n}\r\nfieldset, img {\r\n\tborder: 0\r\n}\r\naddress, caption, cite, code, dfn, em, th, var, optgroup {\r\n\tfont-style: normal;\r\n\tfont-weight: 400\r\n}\r\ndel, ins {\r\n\ttext-decoration: none\r\n}\r\nli {\r\n\tlist-style: none\r\n}\r\ncaption, th {\r\n\ttext-align: left\r\n}\r\nq:before, q:after {\r\n\tcontent: ''\r\n}\r\nabbr, acronym {\r\n\tborder: 0;\r\n\tfont-variant: normal\r\n}\r\nsup {\r\n\tvertical-align: baseline\r\n}\r\nsub {\r\n\tvertical-align: baseline\r\n}\r\nlegend {\r\n\tcolor: #000\r\n}\r\ninput, button, textarea, select, optgroup, option {\r\n\tfont-family: inherit;\r\n\tfont-size: inherit;\r\n\tfont-style: inherit;\r\n\tfont-weight: inherit\r\n}\r\ninput, button, textarea, select {\r\n\toutline:none;\r\n\t*font-size: 100%\r\n}\r\ntextarea{resize:none}\r\n\r\na {\r\n\toutline: 0;\r\n\ttext-decoration: none;\r\n}\r\na:hover {\r\n\toutline: 0;\r\n\ttext-decoration: none;\r\n}\r\n.clearfix, .cf {\r\n\tzoom: 1\r\n}\r\n.clearfix:after, .cf:after {\r\n\tcontent: \"\";\r\n\tdisplay: block;\r\n\theight: 0;\r\n\tclear: both;\r\n\tvisibility: hidden\r\n}\r\n* {\r\n\t-webkit-tap-highlight-color: transparent;\r\n\t-webkit-appearance: none;\r\n\toutline:none;\r\n}\r\n" }, { "path": "static/js/index.js", "content": "(function() {\r\n\tfor (var i = 0; i < 360; i += 22.5) {\r\n\t\tvar useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');\r\n\r\n\t\tuseElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#petal');\r\n\t\tuseElement.setAttribute('fill', 'hsla(' + i + ', 62%, 80%, .35)');\r\n\t\tuseElement.setAttribute('transform', 'rotate(' + i + ' 50 50)');\r\n\r\n\t\tdocument.querySelector('.svg-lotus').appendChild(useElement);\r\n\t}\r\n})();\r\n" } ]