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

源代码：

<!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. Linux命令学习之路——内容剪切:cut

    使用者:所有角色 用法:cut [ -bcdfn ] [ --complement ] filename 作用:截取文件中的部分字段用于展示或存储到新文件中 应用场景: 1.内容展示 : 截取一个或多 ...

  2. Reasoning With Neural Tensor Networks For Knowledge Base Completion-paper

    https://www.socher.org/index.php/Main/ReasoningWithNeuralTensorNetworksForKnowledgeBaseCompletion 年份 ...

  3. error: invalid use of void expression

    void*类型定义的指针变量只可以接收对象的地址,而没有对象类型这个概念.所以void*指针变量是不能直接用“*指针变量”去访问,需要强制类型转换后才能“间接”访问: *(type*)指针变量,必须给 ...

  4. tmpfs临时文件系统，是一种基于内存的文件系统

    在Linux系统内存中的虚拟磁盘映射,可以理解为使用物理内存当做磁盘,利用这种文件系统,可以有效提高在高并发场景下的磁盘读写,但是重启后数据会丢失. 1.查看tmpfs路径 (系统默认开启,大小约为物 ...

  5. PythonStudy——函数的使用 Use of functions

    # print(a) # a = 10 # 注意:函数必须先定义,后使用 # print(get_water) def get_water(water, money): print('收入你的%d元钱 ...

  6. Linux进程调度与抢占

    一.linux内核抢占介绍 1.抢占发生的必要条件 a.preempt_count抢占计数必须为0,不为0说明其它地方调用了禁止抢占的函数,比如spin_lock系列函数.b.中断必须是使能的状态,因 ...

  7. 第十七章 java8特性

    17.java8中Lambda表达式与Stream API的使用 17.1 Lambda 表达式(Lambda Expressions) 1课时 17.2 函数式(Functional)接口 1课时 ...

  8. java volatile

    volatile可以保证变量的可见性 当一个变量定义为volatile后,此变量对所有的线程具有可见性.这里的可见性是指当一个线程修改了这个变量的值,新值对于其他线程来说是可以立即得知的. 每次使用v ...

  9. Linux centos7. 配置安装Oracle

    oralcle 11g r2 配置一下前期的网络环境 一 修改linux核心配置 1.修改用户的SHELL限制vi /etc/security/limits.conf oracle soft npro ...

  10. ionic3 热更新发布步骤记录

    1.安装基本框架npm install -g ionic@latest npm install -g cordova ionic 验证版本号 ionic –version cordova -versi ...