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

源代码：

  1. <!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>
  2.  
  3. <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. 【EMV L2】SDA静态数据认证处理流程

    [静态数据认证] 静态数据认证处理过程中,卡片没有执行任何处理,终端执行的处理流程:1.认证中心公钥的获取终端使用卡片上的认证中心公钥索引(PKI)[TAG:8F,Certification Auth ...

  2. java内部类及四种内部类的实现方式

     java内部类及四种内部类的实现方式 一.内部类定义:内部类分为: 成员内部类.静态嵌套类.方法内部类.匿名内部类. 二.为何要内部类?a.内部类提供了某种进入外围类的窗户.b.也是最吸引人的原因, ...

  3. tcpkill,干掉tcp连接

    场景 当我们需要在不重启服务的情况下断开某一个TCP长连接时,tcpkill工具就非常有用.比如我们要测试某个长连接断开后程序自动重连的情况. tcpkill安装 这个连接的作者改了一下tcpkill ...

  4. leetcode 152. Maximum Product Subarry

    这道题求的是乘积的最大值的,那么依照之前的和的最大值类似的做法的,乘积的最大值可能是在最大值*当前值和最小值*当前值和当前值三者之间取得的最大值的,那么使用两个变量来保存每一步的最大最小值的. cla ...

  5. 《Linux内核原理与分析》第四周作业

    课本:第3章 MenuOS的构造 内容总结 计算机的"三大法宝" 存储程序计算机 函数调用堆栈 中断 操作系统的"两把宝剑" 中断上下文切换:保存现场和恢复现场 ...

  6. Oracle的导入和导出

    导出命令: EXP 用户名/密码@数据库名  BUFFER=64000 file=G:\dmp\full1.dmp  OWNER=用户名 导入命令: IMP 用户名/密码@数据库名 BUFFER=64 ...

  7. windows server 2008 R2之取消多余的安全配置

    一:取消IE浏览器的安全配置(使IE浏览器可以正常上网) 管理员禁用即可 二.取消关机时强制输入关机备注 运行gpedit.msc,选择计算机配置->管理模板->系统->提示“关机时 ...

  8. 让docker容器开机启动

    网上有些文章说,要让docker 的容器自动在开机启动,是写脚本,比如在 rc.local 中写.其实完全没必要这么麻烦,docker 有相关指令,docker run 指令中加入 --restart ...

  9. Mycat 镜像-创建 Docker 镜像

    将 Mycat-server 创建到镜像,使其能够进行容器化部署,我们需要创建 Dockerfile 并在文件中安装其依赖项,使用 centos 做为 base 镜像,并安装 jdk 依赖即可,因此创 ...

  10. c# 状态机实现

    c#仿boost statechart的状态机.去年转到unity使用c#,statechart原来的风格蛮爽的,缺点是编译忒慢,在c#则编译根本不是问题. 不一样的地方首先是简单!因为没做一些东西如 ...