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

源代码：

<!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. window.location.href webkit不兼容

    window.event.returnValue=false; 在location.href后加上后修复 来自为知笔记(Wiz)

  2. 【EMV L2】DDA标准动态数据认证处理流程

    [标准动态数据认证DDA] 标准动态数据处理过程,除了动态签名由卡片生成以外,其他都是由终端执行的.处理过程: 1.认证中心公钥的获取终端使用认证中心公钥索引(PKI)以及卡片中的注册的应用提供商标识 ...

  3. SQLI DUMB SERIES-7

    (1)查看PHP源代码 可以看见输入的id被一对单引号和两对圆括号包围 (2)根据提示:Dump into Outfile可知,此次攻击需要导出文件 (3)在第一关获取 @@datadir 读取数据库 ...

  4. react hooks 笔记

    1. 建议安装以上版本: "dependencies": { "react": "^16.7.0-alpha.2", "react ...

  5. Oracle Sql Loader的学习使用

    最近由于遇到oracle控制文件的使用,虽然不是很复杂,但是从来没有用过,专门花点时间看看.点击 这里 查看详细 1,概述: Sql Loader: 一个批量工具,将文件数据导入到数据库.可以导入一个 ...

  6. Spring Cloud(Dalston.SR5)--Zuul 网关

    我们使用 Spring Cloud Netflix 中的 Eureka 实现了服务注册中心以及服务注册与发现:而服务间通过 Ribbon 或 Feign 实现服务的消费以及均衡负载:使用Hystrix ...

  7. Centos6.5部署Sonar6.7.1备注

    1.一定要用非root账号登录(自己建立账号),建立Sonar目录并部署,因为使用了Elasticsearch 5.6.3做搜索服务器,而它不允许用root账号启动服务,会报如下错误: Excepti ...

  8. 测试WCF遇到的一些问题

    win7+iis7 1.localhost访问bad request错误. 主机地址不要指定为127.0.0.1.设置为”全部未分配“. 2.错误 500.19(由于权限不足而无法读取配置文件)的问题 ...

  9. MFC 中CString 格式16进制转int 十进制

    代码:CString  v_hex ; int v_dec; v_dec = wcstol(v_hex, NULL, 16);

  10. 知识点：Mysql 基本用法之存储过程

    存储过程 一. 介绍 存储过程包含了一系列可执行的sql语句,存储过程存放于MySQL中,通过调用它的名字可以执行其内部的一堆sql 使用存储过程的优点: 用于替代程序写的SQL语句,实现程序与sql ...