https://github.com/chokcoco/svg

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

svg

Last synced: about 1 month ago
JSON representation

SVG奇思妙想

• Host: GitHub
• URL: https://github.com/chokcoco/svg
• Owner: chokcoco
• Created: 2016-07-05T11:37:06.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2020-01-15T07:00:27.000Z (over 5 years ago)
• Last Synced: 2023-11-07T18:09:48.937Z (over 1 year ago)
• Topics: svg
• Language: HTML
• Homepage: http://sbco.cc/demo/svg/html/index.html
• Size: 944 KB
• Stars: 233
• Watchers: 17
• Forks: 66
• 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