https://github.com/chokcoco/svg

SVG奇思妙想
https://github.com/chokcoco/svg

svg

Last synced: 8 months ago
JSON representation

SVG奇思妙想

• Host: GitHub
• URL: https://github.com/chokcoco/svg
• Owner: chokcoco
• Created: 2016-07-05T11:37:06.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2020-01-15T07:00:27.000Z (over 6 years ago)
• Last Synced: 2025-05-08T20:43:59.863Z (about 1 year ago)
• Topics: svg
• Language: HTML
• Homepage: http://sbco.cc/demo/svg/html/index.html
• Size: 944 KB
• Stars: 238
• Watchers: 16
• Forks: 69
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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 图

![loading 图](https://github.com/chokcoco/SVG/blob/master/static/images/1.gif)

#### 饼图

![饼图](https://github.com/chokcoco/SVG/blob/master/static/images/2.gif)

#### 百分比图

![百分比图](https://github.com/chokcoco/SVG/blob/master/static/images/3.gif)

  　![百分比图](https://github.com/chokcoco/SVG/blob/master/static/images/4.gif)

## License

MIT