Repository: chokcoco/SVG
Branch: master
Commit: ddb99b9aa5d4
Files: 5
Total size: 51.4 KB
Directory structure:
gitextract__gizu88s/
├── README.md
├── html/
│ └── index.html
└── static/
├── css/
│ ├── index.css
│ └── reset.css
└── js/
└── index.js
================================================
FILE CONTENTS
================================================
================================================
FILE: README.md
================================================
# SVG 奇思妙想
使用 `SVG` 标签或是CSS属性 `clip-path` 创建的图形
| Demo link | Description |
| ------| ------ |
| [SVG奇思妙想](http://chokcoco.github.io/demo/svg/html/index.html) | 使用 `SVG` or `clip-path` 创建的图形 |
| [CSS奇思妙想](http://chokcoco.github.io/magicCss/html/index.html) | CSS3奇思妙想，单标签实现各类图形 |
由于部分图形使用了 `clip-path` ，兼容性问题，请使用 Chrome 浏览器浏览。
## 使用`svg` 绘制各类统计图形
使用 svg 标签绘制各类百分比图、饼图、loading 图。
#### loading 图
#### 饼图
#### 百分比图
## License
MIT
================================================
FILE: html/index.html
================================================
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<meta content="SVGSecret,SVG解密,SVG奇淫巧计,SVG妙用,SVG图形" name="Keywords">
<meta content="使用SVG实现各类图形" name="description">
<title>SVG奇思妙想</title>
<link rel="stylesheet" type="text/css" href="../static/css/reset.css">
<link rel="stylesheet" type="text/css" href="../static/css/index.css"></head>
<style>
#cnzz_stat_icon_1259441963 {
display: block;
width: 0;
height: 0;
overflow: hidden;
}
</style>
<body>
<h1 style="height: 0;overflow: hidden;">SVG奇思妙想，使用SVG实现各类图形</h1>
<a style="width:149px;height:149px;position:fixed;top:0;right:0;z-index:9999;" href="https://github.com/chokcoco/svg" target="_blank">
<img src="http://chokcoco.github.io/demo/curveJS/images/forkme.png"></a>
<div class="container">
<!-- circle-->
<section id="circle" class="code-wrap cf">
<div class="css-live-wrap">
<summary>圆形</summary>
<hgroup class="circle">
<!-- <svg class="circle-svg"></svg> -->
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: deeppink;
-webkit-clip-path: circle(100px at 100px 100px);
}
.circle-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- polygon-->
<section id="polygon" class=" code-wrap cf">
<div class="css-live-wrap">
<summary>SVG多边形</summary>
<summary>hover、active 可变换效果</summary>
<hgroup class="polygon">
<svg class="polygon-svg">
<defs>
<clipPath id="clip-svg-demo"clipPathUnits="objectBoundingBox">
<polygon points="0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1, 0 0.5"/>
</clipPath>
</defs>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true" >
.polygon {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: darksalmon;
transition:.3s;
-webkit-clip-path: polygon(33% 0%, 66% 0%, 100% 50%, 66% 100%, 33% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
clip-path: polygon(33% 0%, 66% 0%, 100% 50%, 66% 100%, 33% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
}
.polygon:hover{
background-color: aquamarine;
-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}
.polygon:active{
background-color: darkmagenta;
-webkit-clip-path: polygon(50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%, 0% 100%, 100% 100%);
}
.polygon-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- polygon-animate -->
<section id="polygon-animate" class="code-wrap cf">
<div class="css-live-wrap">
<summary>SVG多边形自由切换动画</summary>
<summary>SVG动画的前提是，确定最终形状的点的数目，必须和初始形状的点的数目一样</summary>
<hgroup class="polygon-animate">
<svg class="polygon-animate-svg">
<defs>
<clipPath id="clip-svg-demo"clipPathUnits="objectBoundingBox">
<polygon-animate points="0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1, 0 0.5"/>
</clipPath>
</defs>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.polygon-animate {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: crimson;
transition:.3s;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
animation:polygon-ani 7s linear infinite;
-webkit-animation:polygon-ani 7s linear infinite;
}
@keyframes polygon-ani{
10%{
background-color: darkorange;
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
}
14%{
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
}
24%{
background-color: lemonchiffon;
-webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
}
28%{
-webkit-clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
clip-path: polygon(100% 38%, 82% 100%, 82% 100%, 18% 100%, 0% 38%, 0% 38%, 0% 38%, 0% 38%, 50% 0%);
}
38%{
background-color: darkturquoise;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%,100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%,100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
}
42%{
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%,100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%,100% 75%, 50% 100%, 0% 75%, 0% 75%, 0% 25%, 0% 25%);
}
52%{
background-color: darkcyan;
-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
}
56%{
-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 25% 100%, 0% 60%, 10% 20%, 50% 0%);
}
66%{
background-color: deepskyblue;
-webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
70%{
-webkit-clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
80%{
background-color: indigo;
-webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
}
84%{
-webkit-clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
clip-path: polygon(83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%, 50% 0%);
}94%{
background-color: crimson;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
}
}
.polygon-animate-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- arrow -->
<section id="arrow" class="code-wrap cf">
<div class="css-live-wrap">
<summary>气泡对话框</summary>
<hgroup class="arrow">
<svg class="arrow-svg"></svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.arrow {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: darkorchid;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.arrow-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- star -->
<section id="close" class="code-wrap cf">
<div class="css-live-wrap">
<summary>Close icon</summary>
<hgroup class="close">
<svg class="close-svg"></svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.close {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: gainsboro;
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
.close-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- star -->
<section id="star" class="code-wrap cf">
<div class="css-live-wrap">
<summary>star</summary>
<hgroup class="star">
<svg class="star-svg"></svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.star {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: gold;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star-svg {
width: 0;
height: 0;
}
</style>
</section>
<!-- star -->
<section id="triangle2rect" class="code-wrap cf">
<div class="css-live-wrap">
<summary>triangle2rect</summary>
<summary>clip-path 图形</summary>
<hgroup class="triangle2rect">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</hgroup>
</div>
<style class="code" contenteditable="true">
.triangle2rect {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-animation:aniContainer 2s infinite alternate;
}
.triangle2rect div{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.a{
background:deeppink;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
animation:a 2s infinite alternate;
-webkit-animation:a 2s infinite alternate;
}
.b{
background:deeppink;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
animation:b 2s infinite alternate;
-webkit-animation:b 2s infinite alternate;
}
.c{
background:deeppink;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
animation:c 2s infinite alternate;
-webkit-animation:c 2s infinite alternate;
}
.d{
background:deeppink;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
animation:d 2s infinite alternate;
-webkit-animation:d 2s infinite alternate;
}
@-webkit-keyframes a{
0%,10%{
background:deeppink;
-webkit-clip-path: polygon(0% 0%, 0% 100%, 50% 50%);
}
90%,100%{
background:#069;
-webkit-clip-path: polygon(0% 100%, 25% 100%, 12.5% 0%);
}
}
@-webkit-keyframes b{
0%,10%{
background:deeppink;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 50%);
}
90%,100%{
background:#095;
-webkit-clip-path: polygon(25% 0%, 50% 0%,37.5% 100%);
}
}
@-webkit-keyframes c{
0%,10%{
background:deeppink;
-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 50%);
}
90%,100%{
background:#f80;
-webkit-clip-path: polygon(62.5% 0%,75% 100%,50% 100%);
}
}
@-webkit-keyframes d{
0%,10%{
background:deeppink;
-webkit-clip-path: polygon(100% 100%, 0% 100%, 50% 50%);
}
90%,100%{
background:#f69;
-webkit-clip-path: polygon(100% 0%,87.5% 100%, 75% 0%);
}
}
@-webkit-keyframes aniContainer{
0%,10%{
width:100px;
height:100px;
}
90%,100%{
width:250px;
height:60px;
}
}
</style>
</section>
<!-- 使用 SVG PATH 绘制的矩形 -->
<section id="circle-load-rect" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG PATH 绘制的矩形</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<hgroup class="circle-load-rect">
<svg class="circle-load-rect-svg" width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M20 20 H 180 V 180 H 20 Z" fill="transparent" stroke="black"/>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle-load-rect {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</section>
<!-- 使用 SVG PATH 绘制平滑曲线 -->
<section id="circle-load-q" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG PATH 绘制平滑曲线</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>本曲线使用二次贝塞尔曲线生成</summary>
<hgroup class="circle-load-q">
<svg class="circle-load-q-svg" width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M20 100 Q 7 14, 171 190" fill="transparent" stroke="black"/>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle-load-q {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</section>
<!-- 使用 SVG PATH 绘制平滑曲线 -->
<section id="circle-load-s" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG PATH 绘制平滑曲线</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>本曲线使用三次贝塞尔曲线生成</summary>
<hgroup class="circle-load-s">
<svg class="circle-load-s-svg" width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M20 100 C 97 50, 98 155, 176 99" fill="transparent" stroke="black"/>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle-load-s {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</section>
<!-- 使用 SVG PATH 绘制平滑曲线，用于文字效果 -->
<section id="circle-word" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG PATH 绘制平滑曲线，用于文字效果</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>可以让文字跟随 SVG 路径做出各种形状</summary>
<hgroup class="circle-word">
<svg width="400px" height="300px" viewBox="0 0 400 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="textCircle" d="M 20 100 A 80 80 0 0 0 180 100 A 80 80 0 0 0 20 100" fill="none" stroke="#333" />
<path id="textCircle2" d="M220 100 C 353 9, 245 190, 389 86" fill="none" stroke="black"/>
</defs>
<text class="textCircle" fill="yellowgreen">
<textPath xlink:href="#textCircle">这是一段随着path路径绘制的文字</textPath>
</text>
<text class="textCircle2" fill="deeppink">
<textPath xlink:href="#textCircle2">这是另一段随path路径绘制的文字</textPath>
</text>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle-word {
position: absolute;
width: 400px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.textCircle{
font-size:20px;
letter-spacing:4px;
}
.textCircle2{
font-size:12px;
letter-spacing:1px;
}
</style>
</section>
<!-- 使用 SVG 绘制的文字效果 -->
<section id="svg-word-filter" class="code-wrap cf">
<div class="css-live-wrap" >
<summary>使用 SVG 绘制的文字阴影效果</summary>
<summary>使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内</summary>
<summary>运用了大量 SVG 滤镜</summary>
<hgroup class="svg-word-filter">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="200px" viewBox="0 0 600 100">
<defs>
<pattern id="filter-pattern" width="1" height="3" patternUnits="userSpaceOnUse" patternTransform="rotate(30)">
<rect x="0" y="0" width="1" height=".8" fill="#333"/>
</pattern>
<text id="filter-text" x="50%" y="50%" dy=".3em" text-anchor="middle">SVG filter & mask</text>
<mask id="filter-mask">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<use x="-6" y="-6" stroke="#666" stroke-width="5" xlink:href="#filter-text" opacity="1" fill="#000"/>
</mask>
</defs>
<use x="6" y="6" xlink:href="#filter-text" opacity="1" fill="url(#filter-pattern)" mask="url(#filter-mask)"/>
<use x="0" y="0" xlink:href="#filter-text" fill="#000"/>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.svg-word-filter {
position: absolute;
width: 600px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#filter-text{
font-family:Raleway, Verdana, sans-serif, 微軟正黑體, 微软雅黑, serif, 'Droid Serif', 'Helvetica Neue', Helvetica, Arial;
font-size:64px;
}
</style>
</section>
<!-- 使用 SVG 绘制的文字效果 -->
<section id="svg-word-glitch" class="code-wrap cf">
<div class="css-live-wrap" >
<summary>使用 SVG 绘制的文字故障效果</summary>
<summary>使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内</summary>
<summary>运用了大量 SVG 滤镜</summary>
<hgroup class="svg-word-glitch">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="200px" viewBox="0 0 600 100">
<defs>
<filter id="filter">
<feFlood flood-color="white" result="white" />
<feFlood flood-color="red" result="flood1" />
<feFlood flood-color="limegreen" result="flood2" />
<feOffset in="SourceGraphic" dx="3" dy="0" result="off1a"/>
<feOffset in="SourceGraphic" dx="2" dy="0" result="off1b"/>
<feOffset in="SourceGraphic" dx="-3" dy="0" result="off2a"/>
<feOffset in="SourceGraphic" dx="-2" dy="0" result="off2b"/>
<feComposite in="flood1" in2="off1a" operator="in" result="comp1" />
<feComposite in="flood2" in2="off2a" operator="in" result="comp2" />
<feMerge x="0" width="100%" result="merge1">
<feMergeNode in = "white" />
<feMergeNode in = "comp1" />
<feMergeNode in = "off1b" />
<animate
attributeName="y"
id = "y"
dur ="4s"
values = '104px; 104px; 30px; 105px; 30px; 2px; 2px; 50px; 40px; 105px; 105px; 20px; 6ßpx; 40px; 104px; 40px; 70px; 10px; 30px; 104px; 102px'
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
repeatCount = "indefinite" />
<animate attributeName="height"
id = "h"
dur ="4s"
values = '10px; 0px; 10px; 30px; 50px; 0px; 10px; 0px; 0px; 0px; 10px; 50px; 40px; 0px; 0px; 0px; 40px; 30px; 10px; 0px; 50px'
keyTimes = '0; 0.362; 0.368; 0.421; 0.440; 0.477; 0.518; 0.564; 0.593; 0.613; 0.644; 0.693; 0.721; 0.736; 0.772; 0.818; 0.844; 0.894; 0.925; 0.939; 1'
repeatCount = "indefinite" />
</feMerge>
<feMerge x="0" width="100%" y="60px" height="65px" result="merge2">
<feMergeNode in = "white" />
<feMergeNode in = "comp2" />
<feMergeNode in = "off2b" />
<animate attributeName="y"
id = "y"
dur ="4s"
values = '103px; 104px; 69px; 53px; 42px; 104px; 78px; 89px; 96px; 100px; 67px; 50px; 96px; 66px; 88px; 42px; 13px; 100px; 100px; 104px;'
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 0.548; 0.577; 0.613; 1'
repeatCount = "indefinite" />
<animate attributeName="height"
id = "h"
dur = "4s"
values = '0px; 0px; 0px; 16px; 16px; 12px; 12px; 0px; 0px; 5px; 10px; 22px; 33px; 11px; 0px; 0px; 10px'
keyTimes = '0; 0.055; 0.100; 0.125; 0.159; 0.182; 0.202; 0.236; 0.268; 0.326; 0.357; 0.400; 0.408; 0.461; 0.493; 0.513; 1'
repeatCount = "indefinite" />
</feMerge>
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode in="merge1" />
<feMergeNode in="merge2" />
</feMerge>
</filter>
</defs>
<g>
<text x="50%" y="50%" dy=".3em" text-anchor="middle" class="word-glitch">Amazing SVG</text>
</g>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.svg-word-glitch {
position: absolute;
width: 600px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.word-glitch{
fill: black;
filter: url(#filter);
font-family: Raleway, Verdana, sans-serif, 微軟正黑體, 微软雅黑, serif, 'Droid Serif', 'Helvetica Neue', Helvetica, Arial;
font-size: 80px;
-webkit-font-smoothing: antialiased;
}
</style>
</section>
<!-- 使用 SVG 绘制的文字效果 -->
<section id="svg-word-underwater" class="code-wrap cf">
<div class="css-live-wrap" >
<summary>使用 SVG 绘制的文字在水下的效果（textUnderWater）</summary>
<summary>使用审查元素看看 html 结构，绘画内容及滤镜定义在 svg 标签内</summary>
<summary>运用了大量 SVG 滤镜</summary>
<hgroup class="svg-word-underwater">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="200px" viewBox="0 0 600 100">
<defs>
<filter id="textFilter">
<feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" result="turbulence" data-filterId="5" />
<feDisplacementMap id="distortion" in="SourceGraphic" in2="turbulence" scale="20">
<animate attributeName="scale" values="10; 60; 10" dur="20s" repeatCount="indefinite"></animate>
</feDisplacementMap>
</filter>
</defs>
<g>
<text x="50%" y="50%" dy=".3em" text-anchor="middle" class="word-underwater">textUnderWater</text>
</g>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.svg-word-underwater {
position: absolute;
width: 600px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.word-underwater{
fill: #3d56ce;
filter: url(#textFilter);
font-family: Raleway, Verdana, sans-serif, 微軟正黑體, 微软雅黑, serif, 'Droid Serif', 'Helvetica Neue', Helvetica, Arial;;
font-size: 72px;
}
</style>
</section>
<!-- 使用 SVG stroke 虚线效果，用于绘制文字边框动画 -->
<section id="svg-border-animation" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG stroke 虚线效果，绘制文字边框动画</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>改变 SVG 元素的虚线效果生成补间动画</summary>
<hgroup class="svg-border-animation">
<svg viewBox="0 0 320 60" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect class="shape" height="60" width="320" />
</svg>
<div class="hover-text">HOVER ME</div>
</hgroup>
</div>
<style class="code" contenteditable="true">
.svg-border-animation {
position: absolute;
width: 320px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hover-text{
position:absolute;
line-height:60px;
width:320px;
top:0;
color:#333;
font-size:28px;
text-align:center;
cursor:pointer;
}
.shape{
fill: transparent;
stroke-width:4px;
stroke:#333;
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
}
.svg-border-animation:hover .hover-text{
transition:0.5s;
color:#3F51B5;
}
.svg-border-animation:hover .shape{
-webkit-animation: draw 0.5s linear forwards;
animation: draw 0.5s linear forwards;
}
@keyframes draw {
0% {
stroke-dasharray: 160 520;
stroke-dashoffset: -460;
stroke-width: 4px;
}
100% {
stroke-dasharray: 760;
stroke-dashoffset: 0;
stroke-width: 2px;
stroke:#3F51B5;
}
}
</style>
</section>
<!-- 使用 SVG 绘制的线条动画 -->
<section id="line-animation" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG stroke 虚线效果，绘制的线条动画</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<hgroup class="line-animation">
<svg class="l1" width="200px" height="200px">
<path d="M100,0L200 100L100 200L0 100Z"></path>
</svg>
<svg class="l2" width="200PX" height="200PX">
<path d="M100,25L175,100L100,175L25,100Z"></path>
</svg>
<svg class="l3" width="200PX" height="200PX">
<path d="M100,50L150,100L100,150L50,100Z"></path>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.line-animation {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line-animation svg {
position: absolute;
top: 0;
left: 0;
transform-origin: center center;
transition: all 0.3s;
transform: rotateY(0deg);
}
.line-animation path {
fill: none;
stroke: #000;
stroke-width: 1;
fill: none;
transition: all .3s;
}
.line-animation .l1 path {
stroke-width: 3;
stroke: #666;
stroke-dasharray: 282.84;
stroke-dashoffset: -565.69;
animation: LOADING1 5s linear 0s infinite;
}
.line-animation .l2 path {
stroke-width: 2;
stroke: #333;
stroke-dasharray: 212;
stroke-dashoffset: -424;
animation: LOADING2 4s linear 0s infinite;
}
.line-animation .l3 path {
stroke-dasharray: 141;
stroke-dashoffset: -282;
animation: LOADING3 3s linear 0s infinite;
}
@keyframes LOADING1 {
0% {
stroke-dashoffset: -565.69;
}
50% {
stroke-dashoffset: 0;
stroke-width: 1;
}
100% {
stroke-dashoffset: 565.69;
}
}
@keyframes LOADING2 {
0% {
stroke-dashoffset: 424;
}
50% {
stroke-dashoffset: 0;
stroke-width: 1;
}
100% {
stroke-dashoffset: -424;
}
}
@keyframes LOADING3 {
0% {
stroke-dashoffset: -282;
}
50% {
stroke-dashoffset: 0;
stroke-width: 2;
}
100% {
stroke-dashoffset: 282;
}
}
.line-animation .l1 {
animation: TURN 4s linear 0s infinite;
}
.line-animation .l2 {
animation: TURNBACK 3s linear 0s infinite;
}
.line-animation .l3 {
animation: TURN 1.5s linear 0s infinite;
}
@keyframes TURN {
0% {
transform: rotateY(0deg);
opacity: 1;
}
25% {
transform: rotateY(90deg);
opacity: .6;
}
50% {
transform: rotateY(180deg);
opacity: 1;
}
75% {
transform: rotateY(270deg);
opacity: .6;
}
100% {
transform: rotateY(360deg);
opacity: 1;
}
}
@keyframes TURNBACK {
0% {
transform: rotateY(360deg);
opacity: 1;
}
25% {
transform: rotateY(270deg);
opacity: .6;
}
50% {
transform: rotateY(180deg);
opacity: 1;
}
75% {
transform: rotateY(90deg);
opacity: .6;
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
</style>
</section>
<!-- 使用 SVG 绘制的线条动画 -->
<section id="line-animation2" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG stroke 虚线效果，绘制的线条动画</summary>
<summary>绘画内容在 svg 标签内（刷新查看动画）</summary>
<hgroup class="line-animation2">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" height="200px" >
<line x1="0" y1="0" x2="200" y2="200" class='la-line' />
<line x1="200" y1="0" x2="0" y2="200" class='la-line' />
<line x1="100" y1="10" x2="100" y2="190" class='la-line2' />
<line x1="10" y1="100" x2="190" y2="100" class='la-line2' />
<rect x="10" y="10" width="180" height="180" rx="20" ry="20" class="la-rect"></rect>
<circle cx="100" cy="100" r="80" class="la-circle"></circle>
<rect x="50" y="50" width="100" height="100" rx="20" ry="20" class="la-rect2"></rect>
<circle cx="100" cy="100" r="40" class="la-circle2"></circle>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.line-animation2{
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.la-line{
stroke-width:1px;
stroke:#000;
stroke-dasharray: 282;
stroke-dashoffset: 282;
animation: dash 0.5s ease-in forwards;
}
.la-line2{
stroke-width:1px;
stroke:#000;
stroke-dasharray: 282;
stroke-dashoffset: 282;
animation: dash 0.5s ease-out 0.5s forwards;
}
.la-rect{
fill:none;
stroke:#000;
stroke-dasharray: 720;
stroke-dashoffset: 720;
animation: dash 0.5s linear 1s forwards;
}
.la-circle{
fill:none;
stroke:#000;
stroke-dasharray: 720;
stroke-dashoffset: 720;
animation: dash 0.5s ease-in 1s forwards;
}
.la-rect2{
fill:none;
stroke:#000;
stroke-dasharray: 720;
stroke-dashoffset: -720;
animation: dash 1s ease-out 1s forwards;
}
.la-circle2{
fill:none;
stroke:#000;
stroke-dasharray: 720;
stroke-dashoffset: -720;
animation: dash 1s linear 1s forwards;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
</section>
<!-- 使用 SVG 绘制 loading 图 -->
<section id="circle-load" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG stroke 虚线效果，绘制 loading 图</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>改变 SVG 元素的虚线效果生成补间动画</summary>
<hgroup class="circle-load">
<svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="110" cy="110" r="90" stroke-width="20" stroke="gainsboro" fill="none"></circle>
<circle cx="110" cy="110" r="90" stroke-width="20" stroke="darkturquoise" fill="none" class='circle-load-svg'></circle>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.circle-load {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-load-svg {
stroke-dasharray: 0 570;
animation:rot 8s linear infinite;
}
@keyframes rot{
100%{
stroke-dasharray: 570 570;
}
}
</style>
</section>
<!-- 使用 SVG PATH 绘制饼图 -->
<section id="circle-load-a" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG PATH 绘制饼图</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>点击饼图查看动画过渡效果！</summary>
<hgroup class="circle-load-a" id='pieCon' style="cursor:pointer">
<div id="pie-number">75%</div>
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="#E7E9ED" ></circle>
<path d="M100 100,L100 150,A50 50 0 1 1 150 100,Z" fill="rgba(54, 162, 235, .8)" id="pie" stroke="#fff"; stroke-width"5";/>
</svg>
</hgroup>
</div>
<style class="" contenteditable="true">
.circle-load-a {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(2);
}
#pie-number{
font-size:24px;
color:#fff;
width:200px;
position:absolute;
top:0;
left:0;
line-height:200px;
text-align:center;
text-shadow:0 0 2px #999;
}
</style>
<script class="jscode" contenteditable="true">
var
randomDeg = 0,
// 动画时间
t = 2000,
// 每帧偏移量
eachDeg = 0,
// 初始值
startDeg = 0,
// 初始时间
startTime = null,
// 动画锁
isLock = 0,
// 饼图比例
numberElem = document.getElementById('pie-number');
// 逐帧动画
function pieMove() {
var pie = document.getElementById('pie'),
startAngle = 0,
cx = 100,
cy = 100,
r = 50,
isLarge = 0,
isOver180 = 0,
deg = startDeg,
x0 = cx + r * Math.cos(startAngle * Math.PI / 180),
y0 = cy - r * Math.sin(startAngle * Math.PI / 180),
x1 = cx + r * Math.cos(deg * Math.PI / 180),
y1 = cy - r * Math.sin(deg * Math.PI / 180);
// console.log('deg x0 y0 x1 y1 ',deg,x0,y0,x1,y1);
if (deg > 180) {
isOver180 = 1;
isLarge = 0;
}
pie.setAttribute("d", "M " + cx + "," + cy + " L " + x0 + "," + y0 + " A " + r + " " + r + " 0 " + isOver180 + " " + isLarge + " " + x1 + "," + y1 + " Z");
numberElem.innerText = (parseInt(deg / 360 * 10000) / 100) + "%";
startDeg += eachDeg;
if (new Date() - startTime <= t) {
requestAnimationFrame(pieMove);
} else {
isLock = 0;
}
}
function initClick() {
// 动画运行期间无法点击
if (!isLock) {
// 动画锁
isLock = 1;
// 随机角度
randomDeg = Math.random() * 360,
// 动画时间
t = 2000,
// 每帧偏移量 = 2000 / ( 1000 / 60 ) = 120
eachDeg = randomDeg / 120,
// 初始值
startDeg = eachDeg,
// 初始时间
startTime = new Date();
requestAnimationFrame(pieMove);
}
}
// 点击监听
document.getElementById('pieCon').addEventListener('click', initClick);
initClick();
</script>
</section>
<!-- 使用 SVG 绘制百分比图 -->
<section id="percentage-pie" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG 绘制百分比图</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>使用了 SVG 动画 animate</summary>
<hgroup class="percentage-pie">
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text class="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
<!-- Wave -->
<g id="wave">
<path id="wave-2"
fill="rgba(255, 20, 147, .5)"
d="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z" >
<animate dur="5s"
repeatCount="indefinite"
attributeName="d"
attributeType="XML"
values="M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C145 100, 41 100, 200 100 A95 95 0 0 1 0 100 Z;
M0 100 C90 28, 92 179, 200 100 A95 95 0 0 1 0 100 Z" />
</path>
</g>
<circle cx="100" cy="100" r="80" stroke-width="10" stroke="white" fill="transparent"></circle>
<circle cx="100" cy="100" r="90" stroke-width="20" stroke="deeppink" fill="none" class='percentage-pie-svg'></circle>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true">
.percentage-pie {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</section>
<!-- 使用 SVG 绘制百分比图 -->
<section id="percentage-pie2" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG 绘制可调节数值百分比图</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<summary>使用原生JS控制svg百分比，并生成动画，刷新页面观看动画</summary>
<hgroup class="percentage-pie2">
<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
<text id="liquidFillGaugeText" text-anchor="middle" font-size="42px" transform="translate(100,120)" style="fill: #000">50.0%</text>
<!-- Wave -->
<path id="waveMove"
fill="rgba(170, 125, 57, .8)"
d="M5 100 C90 28, 92 179, 195 100 A95 95 0 0 1 5 100 Z" transform="translate(0,0)">
<!-- d="M5 100 C90 28, 92 179, 195 100 A95 95 0 0 1 5 100 Z" > -->
</path>
<circle cx="100" cy="100" r="90" stroke-width="20" stroke="white" fill="transparent"></circle>
<circle cx="100" cy="100" r="90" stroke-width="10" stroke="rgb(212, 171, 106)" fill="none" class='percentage-pie2-svg'></circle>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true" style="display:none">
.percentage-pie2 {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script class="jscode" contenteditable="true">
var
// 圆半径
r = 90,
// 圆心 x
cx = 100,
// 圆心 y
cy = 100;
/**
* 圆的标准方程
* (x－a)²+(y－b)²=r²
* 已经 r 、y 求 x
* x1 = Math.sqrt(r^2 - (y - cy)^2) + 95
* x2 = Math.sqrt(r^2 - (y - cy)^2) - 95
* @return {[type]} [description]
*/
var randomY = ~~(Math.random() * 19000) / 100,
// 初始Y值
startY = 100,
// 与原距离差值
offsetY = startY - randomY,
// 运动时间
duration = 3000,
// 当前时间
startTime = new Date(),
// svg elem
svgElem = document.getElementById('waveMove'),
// 百分比
svgText = document.getElementById('liquidFillGaugeText'),
// 是否大于180度
isOver180 = offsetY < 0 ? 1 : 0;
// console.log(svgElem);
// console.log('randomY', randomY);
// console.log('offsetY', offsetY);
requestAnimationFrame(function waveAni() {
// 当前时间线
var t = Math.min(1, (Date.now() - startTime) / duration);
randomY = startY + (t * offsetY);
var
// 圆弧起始点 x 坐标
x1 = Math.sqrt(r * r - (randomY - cy) * (randomY - cy)) + r,
// 圆弧终点 x 坐标
x2 = r - Math.sqrt(r * r - (randomY - cy) * (randomY - cy)),
// 设定三次贝塞尔曲线参数
xGap = (x1 - x2) / 3,
// 波浪幅度
yGap = 30;
// console.log('t',t);
// console.log('randomY',randomY);
// console.log('x1 x2',x1,x2);
// console.log('xGap',xGap);
// console.log('yGap',yGap);
// 动画移动路径
// console.log('M',x2,randomY,'C',x2+xGap,randomY-yGap,',',x2+xGap+xGap,randomY+yGap,',',x1,randomY,'A',r,r,'0 0 1',x2,randomY,'Z');
var path = 'M ' + x2 + ' ' + randomY + ' C ' + (x2 + xGap) + ' ' + (randomY - yGap) + ' , ' + (x2 + xGap + xGap) + ' ' + (randomY + yGap) + ' , ' + x1 + ' ' + randomY + ' A ' + r + ' ' + r + ' ' + '0 ' + isOver180 + ' 1' + ' ' + x2 + ' ' + randomY + ' Z';
// 使用 setAttribute 动态添加移动路径
svgElem.setAttribute('d', path);
// 修改百分比值
svgText.firstChild.nodeValue = ~~((190 - randomY) / 190 * 10000) / 100 + "%";
if (t < 1.0) requestAnimationFrame(waveAni);
});
</script>
</section>
<!-- 使用 SVG 绘制莲花图 -->
<section id="lotus" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG 绘制莲花图</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<hgroup class="lotus">
<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M100 10Q150 50,100 100Q50 50,100 10Z" id="petal"/>
</defs>
<g class="svg-lotus">
<animateTransform dur="10s" attributeName="transform" repeatCount="indefinite" type="rotate" from="0,100,100" to="360,100,100"/>
</g>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true" style="display:none">
.lotus {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script class="jscode" contenteditable="true">
(function() {
for (var i = 0; i < 360; i += 22.5) {
// 创建 <use> 标签
var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// 创建命名空间
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#petal');
useElement.setAttribute('fill', 'hsla(' + i + ', 62%, 80%, .35)');
useElement.setAttribute('transform', 'rotate(' + i + ' 100 100)');
// 插入 <use>
document.querySelector('.svg-lotus').appendChild(useElement);
}
})();
</script>
</section>
<!-- 使用 SVG 绘制风车 -->
<section id="windmill" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG 绘制风车</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<hgroup class="windmill">
<svg viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M100 10Q150 50,100 100Z" id="windm"/>
</defs>
<g class="svg-windmill">
<animateTransform dur="10s" attributeName="transform" repeatCount="indefinite" type="rotate" from="0,100,100" to="360,100,100"/>
</g>
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true" style="display:none">
.windmill {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script class="jscode" contenteditable="true">
(function() {
for (var i = 0; i < 360; i += 30) {
// 创建 <use> 标签
var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// 创建命名空间
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#windm');
useElement.setAttribute('fill', 'hsla(200, 30%, 60%, .5)');
useElement.setAttribute('transform', 'rotate(' + i + ' 100 100)');
// 插入 <use>
document.querySelector('.svg-windmill').appendChild(useElement);
}
})();
</script>
</section>
<!-- 使用 SVG 绘制 360 极速浏览器图标 -->
<section id="sixSpeed" class="code-wrap cf">
<div class="css-live-wrap">
<summary>使用 SVG 绘制 360 极速浏览器图标</summary>
<summary>使用审查元素看看 html 结构，绘画内容在 svg 标签内</summary>
<hgroup class="sixSpeed">
<svg class="svg-sixSpeed" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<path d="M120 10Q78 39,100 100C15 88, 19 3, 120 10Z" id="speed"/>
<circle cx="95" cy="95" r="10" fill="white" id='icon-center'></circle>
</defs>d
</svg>
</hgroup>
</div>
<style class="code" contenteditable="true" style="display:none">
.sixSpeed {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<script class="jscode" contenteditable="true">
(function() {
var color = ['#C538F5','#F44018','#F7EA09','#2BD067','#4192F4'],
j = 0;
for (var i = 40; i < 400; i += 72) {
// 创建 <use> 标签
var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use'),
centerElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
// 创建命名空间
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#speed');
useElement.setAttribute('fill', color[j++]);
useElement.setAttribute('transform', 'rotate(' + i + ' 95 95)');
centerElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#icon-center');
// 插入 <use>
document.querySelector('.svg-sixSpeed').appendChild(useElement);
document.querySelector('.svg-sixSpeed').appendChild(centerElement);
}
})();
</script>
</section>
</div>
<div id="tips">
因部分图案使用 clip-path，兼容性不佳，建议使用高版本 Chrome 内核浏览器观看。
</div>
<script type="text/javascript">
var cnzz_protocol = (("https: " == document.location.protocol) ? " https://":" http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1259441963'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259441963'type='text/javascript'%3E%3C/script%3E"));
// 低版本IE弹出层关闭
var
elem = document.getElementById('tips'),
ngua = navigator.userAgent,
reg = /webkit|chrome|safari/gi,
isW = reg.test(ngua);
if(!isW){
elem.style.display="block";
elem.addEventListener('click',function(){
this.style.display="none";
});
}
</script>
</body>
</html>
================================================
FILE: static/css/index.css
================================================
.container{
width: 100%;
position: relative;
z-index:100;
}
#tips{
display:none;
width:470px;
height:60px;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
padding:50px;
font-size:24px;
background-color:#fff;
color:#333;
border:5px solid deeppink;
z-index:9999;
cursor:pointer;
box-shadow:0 0 0 1000px rgba(0,0,0,.5);
text-align:center;
}
.code-wrap{
width: 100%;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
height:400px;
margin-bottom:10px;
position:relative;
}
.css-live-wrap{
position:relative;
width:50%;
height:100%;
float:left;
}
.code,.jscode{
width: 50%;
height:100%;
box-sizing: border-box;
font-size:14px;
background: #ffe;
display: block;
float: right;
padding: 1em;
font-family: Consolas, Monaco, monospace;
white-space: pre;
color:#333;
/* text-shadow: 0 1px 1px white; */
overflow-y:scroll;
}
summary{
position:absolute;
cursor:default;
left:0;
color: #999;
font-size: 14px;
line-height:18px;
margin: 20px 0 0 20px;
border-left: 2px solid #FF9800;
padding: 0 10px;
text-shadow: 0 0.2px hsl(0,0%,85%);
/* background: linear-gradient(#FF9800, #FF9800) no-repeat; */
background-size: 100% 1px;
background-position: -400px bottom;
transition:.5s;
}
summary:nth-child(2){
margin-top:60px;
}
summary:nth-child(3){
margin-top:100px;
}
================================================
FILE: static/css/reset.css
================================================
@charset "utf-8";
/*CSS reset*/
html {
overflow-x: hidden;
overflow-y: auto;
color: #333;
font-size: 62.5%;
font-family: Microsoft Yahei,simsun,Tahoma,Helvetica,Arial,SimHei,sans-serif;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote {
margin: 0;
padding: 0
}
fieldset, img {
border: 0
}
address, caption, cite, code, dfn, em, th, var, optgroup {
font-style: normal;
font-weight: 400
}
del, ins {
text-decoration: none
}
li {
list-style: none
}
caption, th {
text-align: left
}
q:before, q:after {
content: ''
}
abbr, acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: baseline
}
sub {
vertical-align: baseline
}
legend {
color: #000
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
font-style: inherit;
font-weight: inherit
}
input, button, textarea, select {
outline:none;
*font-size: 100%
}
textarea{resize:none}
a {
outline: 0;
text-decoration: none;
}
a:hover {
outline: 0;
text-decoration: none;
}
.clearfix, .cf {
zoom: 1
}
.clearfix:after, .cf:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden
}
* {
-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
outline:none;
}
================================================
FILE: static/js/index.js
================================================
(function() {
for (var i = 0; i < 360; i += 22.5) {
var useElement = document.createElementNS('http://www.w3.org/2000/svg', 'use');
useElement.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#petal');
useElement.setAttribute('fill', 'hsla(' + i + ', 62%, 80%, .35)');
useElement.setAttribute('transform', 'rotate(' + i + ' 50 50)');
document.querySelector('.svg-lotus').appendChild(useElement);
}
})();
gitextract__gizu88s/
├── README.md
├── html/
│ └── index.html
└── static/
├── css/
│ ├── index.css
│ └── reset.css
└── js/
└── index.js
Condensed preview — 5 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (62K chars).
[
{
"path": "README.md",
"chars": 738,
"preview": "# SVG 奇思妙想 \n使用 `SVG` 标签或是CSS属性 `clip-path` 创建的图形\n\n| Demo link | Description |\n| ------| ------ | \n| [SVG奇思妙想](http://cho"
},
{
"path": "html/index.html",
"chars": 48537,
"preview": "<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<meta http-equiv=\"Content-Type\"content=\"text/html; charset=utf-8\"/>\r\n\t<meta content=\"S"
},
{
"path": "static/css/index.css",
"chars": 1481,
"preview": ".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"
},
{
"path": "static/css/reset.css",
"chars": 1392,
"preview": "@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"
},
{
"path": "static/js/index.js",
"chars": 436,
"preview": "(function() {\r\n\tfor (var i = 0; i < 360; i += 22.5) {\r\n\t\tvar useElement = document.createElementNS('http://www.w3.org/20"
}
]
About this extraction
This page contains the full source code of the chokcoco/SVG GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 5 files (51.4 KB), approximately 18.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.