[翻译svg教程]svg中的circle元素

时间:2022-09-23 18:48:16

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>

 

效果如下

[翻译svg教程]svg中的circle元素

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

圆形的边框

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

例如

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

圆形的填充

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

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

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

[翻译svg教程]svg中的circle元素

这是一个填充颜色的例子

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

[翻译svg教程]svg中的circle元素

还可以通过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元素

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

  1. &lbrack;翻译svg教程&rsqb;svg学习系列 开篇

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

  2. &lbrack;翻译svg教程&rsqb;svg 中的g元素

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

  3. &lbrack;翻译svg教程&rsqb;svg中矩形元素 rect

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

  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&period; svg学习笔记-文档结构元素和样式的使用

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

  9. svg教程

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

随机推荐

  1. LeetCode之226&period; Invert Binary Tree

    ------------------------------------- 反转树的基本操作. 可是下面那句话是什么鬼啊,这么牛掰的人都会有这种遭遇,确实抚慰了一点最近面试被拒的忧伤..... AC代 ...

  2. 原生js dom记忆的内容

    1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...

  3. DMZ区域

    DMZ是英文"demilitarized zone"的缩写,中文名称为"隔离区",也称"非军事化区".它是为了解决安装防火墙后外部网络不能访 ...

  4. BZOJ 1017 魔兽地图DotR(树形DP)

    题意:有两类装备,高级装备A和基础装备B.现在有m的钱.每种B有一个单价和可以购买的数量上限.每个Ai可以由Ci种其他物品合成,给出Ci种其他物品每种需要的数量.每个装备有一个贡献值.求最大的贡献值. ...

  5. typedef和define具体的具体差别

      1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,仅仅有在编译已被展开的源程序时才会发现可能的错误并报错.比如: #define PI 3. ...

  6. ASP&period;NET Core WebApi中使用FluentValidation验证数据模型

    原文链接:Common features in ASP.NET Core 2.1 WebApi: Validation 作者:Anthony Giretti 译者:Lamond Lu 介绍 验证用户输 ...

  7. OpenGL实例:三角形

    OpenGL实例:三角形 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多请查看:计算机图形学 1. 三角形的旋转 #include <GL/ ...

  8. Feature Extractor&lbrack;inception v2 v3&rsqb;

    0 - 背景 在经过了inception v1的基础上,google的人员还是觉得有维度约间的空间,在<Rethinking the Inception Architecture for Com ...

  9. IOS应用内嵌cocos2dx游戏项目

    1.创建Cocos2d-x项目 相比于Android来说cocos2dx的iPhone环境基本不用配置,直接创建用xcode打开就可以运行. 到Cocos2d-x官方网站下载最新版本引擎. 将刚才下载 ...

  10. ARC下野指针 EXC&lowbar;BAD&lowbar;ACCESS错误

    一般都是多线程造成的,某一个线程在操作一个对象时,另一个线程将此对象释放,此时就有可能造成野指针的问题.一种解决办法是如果都是UI操作则将这些操作都放在主线程去执行. 通常出现此问题的地方都在RAC, ...