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

源代码：

<!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. ubuntu 16.04 更换源

    进入/etc/apt/ cd /etc/apt 在修改前先对 sources.list文件进行备份 sudo cp sources.list sources.list.bak 修改sources.li ...

  2. C#语言与变量、数据类型

    一.计算机语言 1.计算机语言包括:C\PHP\Ruby\JAVA\C#\Basi\JS\C++ 2.计算机语言发展史:机器语言——汇编语言——高级语言 二.代码 1.程序始终:Code(编码).Co ...

  3. 《Linux内核原理与分析》第六周作业

    课本:第五章 系统调用的三层机制(下) 中断向量0x80和system_call中断服务程序入口的关系 0x80对应着system_call中断服务程序入口,在start_kernel函数中调用了tr ...

  4. 安装phpssdbadmin

    1:先安装nginx+php   参考博文:http://www.cnblogs.com/lemon-le/p/7161356.html 里面有详细的搭建lnmp架构,这里只需参照安装php和ngin ...

  5. 乐乐课堂_leleketang.com

    乐乐课堂_leleketang.com https://www.baidu.com/sf?pd=video_page&sign=12394301609542619800&word=抛物 ...

  6. FP-Growth算法

    FP-Growth算法的目标是发现模式,其特点就是高效,因为可以通过设置发生频次直接过滤掉一些低频次的元素:而且秉承了和Apriori的思想,对于低频次的元素,其父级和子级的组合都是低频的. FP-G ...

  7. Red-Gate.NET.Reflector.v8.0.1.308(内含注册机Keygen与注册图解)

    Red-Gate.NET.Reflector.v8.0.1.308(内含注册机Keygen与注册图解)   反编译神器 内含软件安装包.注册机及插件集合. 这里说下注册方法,注意不要在联网的情况下注册 ...

  8. 淘宝客知道这几个ID，收入将会提高50%

    基础问题天天说,天天有人问.这篇文章写点基础的.特别对新手的帮助会很大哦. 1,PID,做淘宝客不知道PID,赚到钱也会被冻结. 如何手动获取PID 2,单品ID,淘宝商品的唯一识别编号,和身份证一样 ...

  9. ubuntu彻底卸载opencv

    说正事之前,先啰嗦两句背景,算是拿个小本本记下了. 我本打算下载opencv2.4.在github上找到源码,在Branch处选择切换到2.4,然后复制URL,在terminal里面使用git clo ...

  10. CentOS 7安装php

    我们已经在上一篇里安装上了nginx:现在我们想要php(也许还包括mysql). (CentOS 7里使用mariadb替代了mysql) # yum install mariadb-client ...