SVG绘制太极图
思路:先画一整个圆,填充颜色为黑色,再用一个边框和填充颜色均为白色的长方形覆盖右半边的半圆,再以同一个圆心,相同半径绘制一整个圆,该圆的边线颜色为黑色,没有填充颜色,最后常规操作再画四个小圆
源代码:
<!doctype html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<svg id="svg" width=600px height=600px >
<circle cx="100" cy="100" r="100" fill="black" stroke="black"></circle>
<polygon points="100,0 200,0 200,200 100,200 100,0" stroke="white" fill="white"></polygon>
<circle cx="100" cy="100" r="100" fill="none" id="circle2" stroke="black"></circle>
<circle cx="100" cy="50" r="50" fill="white" stroke="none"></circle>
<circle cx="100" cy="150" r="50" fill="black" stroke="none"></circle>
<circle cx="100" cy="50" r="20" fill="black" stroke="black"></circle>
<circle cx="100" cy="150" r="20" fill="white" stroke="black"></circle>
</svg> <script>
</script>
</body>
</html>
SVG绘制太极图的更多相关文章
- 使用SVG绘制湖南地图
项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...
- SVG Drawing Animation - SVG 绘制动画
一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...
- html 5新特性 --用SVG绘制的微信logo
一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...
- SVG绘制圆形简单示例分享
今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...
- 18个超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...
- svg绘制一个简单地饼图
一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
- 程序猿必备的10款超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...
- SVG绘制图形
一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...
- 使用SVG绘制流程图
本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...
随机推荐
- java mysql数据库链接与资源关闭
/** * Created by Clear on 2018/8/11. * here provide the kind of connections from mysql database,and ...
- Windows下用PIP安装scipy出现no lapack/blas resources found
Windows下升级了pandas,但是发现scipy包随后引用出错,后来确认需重新安装scipy, 在用PIP安装scipy出现no lapack/blas resources found的错误,具 ...
- NN 激活函数 待修改
Softmax 函数/算法 https://www.zhihu.com/question/23765351 RELU 激活函数及其他相关的函数 http://blog.csdn.net/u013146 ...
- BNF
Backus-Naur Form, 巴科斯-诺尔 范式:一种描述高级语言语法的表示法. BNF 符号概览 符号 描述 ::= 该符号左边的元素被该符号右边的结构所定义 *: 该符号前面的结构可以重复零 ...
- 查看进程在CPU和内存占用的命令
1.使用top命令 输入M表示按内存排序,也就是RES这一列从大到小排序了 它占用了3.3%的内存,用134568除以4030416结果就是3.3左右 也就是说 总物理内存是3.84GB RES这一列 ...
- k8s-YAML配置文件(转)
转自http://www.cnblogs.com/bigberg/p/9203619.html 一.YAML基础 YAML是专门用来写配置文件的语言,非常简洁和强大,使用比json更方便.它实质上是一 ...
- [转]Python如何引入自定义模块?
转自 http://www.cnblogs.com/JoshuaMK/p/5205398.html Python运行环境在查找库文件时是对 sys.path 列表进行遍历,如果我们想在运行环境中注册新 ...
- SpringBoot RestFul风格API接口开发
本文介绍在使用springBoot如何进行Restful Api接口的开发及相关注解已经参数传递如何处理. 一.概念: REST全称是Representational State Transfer,中 ...
- [zz]LyX中文问题
http://www.cnblogs.com/biaoyu/archive/2012/04/28/2475318.html LyX是一款极为优秀的所见即所得的文档处理软件,与MS Word相比,其排版 ...
- 【java】模板方法设计模式
模板方法:在定义功能时,功能一部分是确认的,另一部分是不确认的或者后续会变化的.这时可以把不确定的部分暴露出去,定义成抽象类或者接口,由子类来完成. abstract class GetDuring ...