思路：先画一整个圆，填充颜色为黑色，再用一个边框和填充颜色均为白色的长方形覆盖右半边的半圆，再以同一个圆心，相同半径绘制一整个圆，该圆的边线颜色为黑色，没有填充颜色，最后常规操作再画四个小圆

源代码：

<!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绘制太极图的更多相关文章

  1. 使用SVG绘制湖南地图

    项目中有需求使用SVG绘制湖南地图,现把自己制作过程写一下供大家参考. 1.首先准备一张湖南地图(仅有各市边界线即可).(图片最好是PNG的,除了地图其它什么也没有) 2.准备SVG编辑工具SVGDe ...

  2. SVG Drawing Animation - SVG 绘制动画

    一个小实验,探索 SVG 线图动画的使用情况,以前沿的展示形式呈现图形或网站元素的外观,模拟它们的加载.SVG 真的很强大,有许多创造性和可能性,使用 SVG 可以制作各种有趣的网站交互效果.今天这篇 ...

  3. html 5新特性 --用SVG绘制的微信logo

    一个简单的SVG绘制图片的小案例. 效果图: 代码如下: <style> * { ; ; } body { background-color: #d5d3d4; } .container ...

  4. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  5. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  6. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  7. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  8. SVG绘制图形

    一.SVG介绍 1.SVG指可伸缩矢量图片 2.SVG用来定义用于网络的基于矢量的图形 3.SVG使用XML格式定义图形 4.SVG图像在放大或改变尺寸的情况下其图形质量不会有损失 5.SVG是万维网 ...

  9. 使用SVG绘制流程图

    本篇主要记录流程图的实现过程中的难点和核心技术点,先上效果图: 节点可以任意拖拽,曲线跟随变化 正在连接的线 1.节点实现 流程图是基于SVG绘制的,节点主要利用 g 和 foreignObject的 ...

随机推荐

  1. # 20175120 2018.3.3 《Java程序设计》第1周学习总结

    ## 教材学习内容总结 1.安装ubuntu,在实验楼学习liunx系统各种功能的实现.2.在ubuntu平台上进行java程序的编写3.学会使用JDB调试java程序,并将代码上传到码云上4.学习j ...

  2. linux日常命令之三

    一.换行符 linux换行符为\n,而windows换行符为\r\n. 因此,linux的原生文本文件,换行符为\n,而windows为\r\n:将linux文件拷贝至windows,换行符保持不变, ...

  3. Python全栈之路----类型转换

    显式转换 int(x [,base]) ⇒ 将x转换为一个十进制的整数 long(x [,base]) ⇒ 将x转换为一个十进制的长整数 float(x) ⇒ 将x转换为一个浮点数 str(objec ...

  4. sql语言 含有包含关系的查询 （含mysql 和sql sever）

    一.sql中查询包含关系的查询 sql语句中包含关系可以使用 in 和exist,但有些时候仅仅用这两个是不够的,还有表示方法是  not exist(b expect a )可以表示a包含b. 二. ...

  5. Linux 文件类型笔记

    在UNIX中一切都是文件https://ph7spot.com/musings/in-unix-everything-is-a-file在UNIX中,一切都是字节流 ==== linux系统的文件类型 ...

  6. Centos7 firewall开放3306端口

    目录 Centos7 firewall开放3306端口 1. 查看防火墙状态 2. 关闭防火墙firewall 3. 关闭防火墙firewall后开启 4. 开启端口 5. 重启防火墙 6. 常用命令 ...

  7. 【转】python两个 list 获取交集，并集，差集的方法

    1. 获取两个list 的交集: #方法一: a=[2,3,4,5] b=[2,5,8] tmp = [val for val in a if val in b] print tmp #[2, 5] ...

  8. Codeblocks中文乱码解决方法

    odeblocks中文乱码解决方法: 特别提示:出现中文乱码情况才执行以下操作,未出现请勿随意修改!!!! 打开Codeblocks -> 设置 -> 编辑器: 然后点击 Encoding ...

  9. OpenLDAP主从

    yum -y install compat-openldap必须得安装这个   1:在主上       备份         cp /etc/openldap/slapd.conf /etc/open ...

  10. 第二章 C#语法基础(2.1 C#语言的数据类型一)

    C#的数据类型 [案例]本案例实现3位评委给一位选手评分,通过键盘输入各位评委的打分,通过屏幕输出该选手的平均分. [案例目的] (1)掌握变量的定义方式; (2)掌握常用的数据类型; (3)掌握数据 ...