svg中的<circle> 元素,是用来绘制圆形的,例如

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> </svg>

 

效果如下

属性说明 cx,cy 设定圆心,r设定半径

圆形的边框

可以通过设置样式设置圆形的边框

例如

<circle cx="40" cy="40" r="24"
style="stroke:#006600;
stroke-width: 3;
fill:#00cc00"/>
属性说明 stroke             边框的颜色
        stroke-width       边框的宽度
        fill               填充的颜色
效果如下
当然可以通过 stroke-dasharray 属性设置边框为虚线 
例如
<circle cx="40" cy="40" r="24"
style="stroke:#006600;
stroke-width: 3;
stroke-dasharray: 10 5;
fill:#00cc00"/>
效果如下 
也可以禁用边框 例如
<circle cx="40" cy="40" r="24"
style="stroke: none;
fill:#00cc00"/>
效果

圆形的填充

style 中的fill 属性用于设置圆形如何填充,如果不想圆形被填充可以把fill设置为none

例如 这是一个不填充的效果

<circle cx="40" cy="40" r="24"
style="stroke: #00600;
fill:none"/>

这是一个填充颜色的例子

<circle cx="40" cy="40" r="24"
style="stroke: #660066;
fill: #00ff00"/>

还可以通过fill-opacity来设置透明度

例如两个圆部分重叠在一起

<circle cx="40" cy="40" r="24"
style="stroke: #660000;
fill: #cc0000" />
<circle cx="64" cy="40" r="24"
style="stroke: #000066;
fill: #0000cc"
fill-opacity: 0.5/>

[翻译svg教程]svg中的circle元素的更多相关文章

  1. [翻译svg教程]svg学习系列 开篇

    目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...

  2. [翻译svg教程]svg 中的g元素

    svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...

  3. [翻译svg教程]svg中矩形元素 rect

    svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...

  4. 使用SVG中的Symbol元素制作Icon【摘转】

    以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...

  5. 【翻译svg教程 】svg 的坐标系统

    http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...

  6. 使用iframe方式获得svg中的DOM元素,和svg 的 contentDocument 返回 null

    碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 https://segmentfault.com/q/1010000009001758 var iframe = document.getEl ...

  7. SVG 教程

    SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...

  8. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  9. svg教程

    实例 <html> <body> <h1>My first SVG</h1> <svg style="border: 1px solid ...

随机推荐

  1. 在Centos中部署redis运行状态图形化监控工具 — RedisLive

    写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯OA基础服务中redis运行情况的一张监控图,然后想到自己的项目中前不久也上了re ...

  2. 解决pip安装超时

    我们在使用python开发的时候总会需要安装很多第三方模块 比如我用flask搭建web, 需要很多第三方模块,比如flask-sqlalchemy, flask-bootstrap等等.而这些模块用 ...

  3. C#数字日期装换为中文日期

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  4. 7九章算法强化班全解--------Hadoop跃爷Spark

    ------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...

  5. 点击页面判断是否安装app并打开,否则跳转app store的方法

    常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...

  6. Python: Windows 7 64位 安装、使用 pymongo 3.2

    官网tutorial:  http://api.mongodb.com/python/current/tutorial.html 本教程将要告诉你如何使用pymongo模块来操作MongoDB数据库. ...

  7. java中scanner类的用法

    在Eclipse中编写程序时,如果我们的变量是需要手动输入的时候,我们就可以用到scanner类了. Scanner类,这是一个用于扫描输入文本的新的实用程序.由于任何数据都必须通过同一模式的捕获组检 ...

  8. 非旋treap模板

    bzoj3580 非旋转treap 在大神教导下发现split一段区间时先split右边再split左边比较好写 #include <cstdio> #include <cstdli ...

  9. java方法强制传递引用参数(做为返回值),改变被传递参数值。

    Java传递参数分为2种: 值类型,Java里面也叫简单类型,这种参数类型的传递的是它的副本拷贝: 引用类型,传递的是对象引用地址,如果在方法内改变该参数对象属性即是对原引用对象的改变:如果不想这样传 ...

  10. (3)WebApi客户端调用

    1.创建一个应用台控制程序,可以把Model的引用,用下面的方法拖拽上来(解决方案里没有这个文件,只是这个文件的引用)  2.Program.cs using System; using System ...