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桌面安装

    1.显示系统已经安装的组件,和可以安装的组件: #yum grouplist 2.如果系统安装之初采用最小化安装,没有安装xwindow,那么先安装: #yum groupinstall " ...

  2. Android 实现应用升级方案(暨第三方自动升级服务无法使用后的解决方案)

    第三方推送升级服务不再靠谱: 以前在做Android开发的时候,在应用升级方面都是使用的第三方推送升级服务,但是目前因为一些非技术性的问题,一些第三方厂商不再提供自动升级服务,比如友盟,那么当第三方推 ...

  3. oracle11g AUD$维护

    SYSTEM表空间使用率达到了85%,查出是用来记录审计记录的aud$表占用了很大的空间. 备份后truncate掉AUD$,问题临时解决.记得oracle11.2可以把aud$迁移到普通的表空 间. ...

  4. C#算法基础之递归排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 【Maven实战】Maven开发环境的搭建和案例展示

    1.首先到www.apache.org中下载maven,得到一个apache-maven-3.1.0-bin.zip的压缩包. 2.将此压缩包解压,这里解压到D:\docs中,然后找到maven的bi ...

  6. MapReduce初级案例

    1.数据去重  "数据去重"主要是为了掌握和利用并行化思想来对数据进行有意义的筛选.统计大数据集上的数据种类个数.从网站日志中计算访问地等这些看似庞杂的任务都会涉及数据去重.下面就 ...

  7. 使用TensorFlow创建第变量定义和运行方式

    import tensorflow as tf# 熟悉tensorflow的变量定义和运行方式v1 = tf.Variable(2) #定义变量并给变量赋值v2 = tf.Variable(48) c ...

  8. python并发编程之IO模型,

    了解新知识之前需要知道的一些知识 同步(synchronous):一个进程在执行某个任务时,另外一个进程必须等待其执行完毕,才能继续执行 #所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调 ...

  9. synchronized的一些记录

    1.方法内的私有变量,不存在线程安全问题.非线程安全问题存在于实例变量(全局变量)中 2.在方法上加synchronized表示,当第一个线程进入时方法加锁(其他方法无法调用) 3.synchroni ...

  10. flowable 的ProcessEngine配置

    1 flowable process engine 是通过  flowable.cfg.xml 配置文件配置的.在spring 环境中是使用 flowable-context.xml 配置文件的, P ...