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元素的更多相关文章
-
[翻译svg教程]svg学习系列 开篇
目录 [翻译svg教程]svg学习系列 开篇 [翻译svg教程 ]svg 的坐标系统 [翻译svg教程]svg 中的g元素 [翻译svg教程]svg中矩形元素 rect [翻译svg教程]svg中的c ...
-
[翻译svg教程]svg 中的g元素
svg 中的<g>元素用来组织svg元素.如果一组svg元素被g元素包裹了,你可以通过对g元素进行变换(transform),被g元素包裹的元素也将被变换,就好这些被svg包裹的元素是一个 ...
-
[翻译svg教程]svg中矩形元素 rect
svg 元素<rect> 是一个矩形元素,用这个元素,可以你可以绘制矩形,设置矩形宽高,边框的宽度颜色,矩形的填充颜色,是否用圆角等 rect 示例 <svg xmlns=" ...
-
使用SVG中的Symbol元素制作Icon【摘转】
以下为内容摘抄和转摘记录: 为什么要用svg ? SVG优势 随着高清屏幕的普及,相比使用png等位图而言,使用SVG等矢量图形是一种全新的设计方式.更重要的是相比位图而言,SVG有着无可比拟的优势. ...
-
【翻译svg教程 】svg 的坐标系统
http://tutorials.jenkov.com/svg/svg-coordinate-system.html svg的坐标系统(和大多数计算机绘图的坐标系统)和数学中绘图系统有点不一样 数学/ ...
-
使用iframe方式获得svg中的DOM元素,和svg 的 contentDocument 返回 null
碰到这个的相关问题,百度找了好久,找到了个解决方法,原址 https://segmentfault.com/q/1010000009001758 var iframe = document.getEl ...
-
SVG 教程
SVG 意为可缩放矢量图形(Scalable Vector Graphics). SVG 使用 XML 格式定义图像. 现在开始学习 SVG! <html> <body> &l ...
-
4. svg学习笔记-文档结构元素和样式的使用
svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
-
svg教程
实例 <html> <body> <h1>My first SVG</h1> <svg style="border: 1px solid ...
随机推荐
-
LeetCode之226. Invert Binary Tree
------------------------------------- 反转树的基本操作. 可是下面那句话是什么鬼啊,这么牛掰的人都会有这种遭遇,确实抚慰了一点最近面试被拒的忧伤..... AC代 ...
-
原生js dom记忆的内容
1.DOM基础getElementByIdgetElementByTagNamegetElementByName getElementsByClass querySelector querySelec ...
-
DMZ区域
DMZ是英文"demilitarized zone"的缩写,中文名称为"隔离区",也称"非军事化区".它是为了解决安装防火墙后外部网络不能访 ...
-
BZOJ 1017 魔兽地图DotR(树形DP)
题意:有两类装备,高级装备A和基础装备B.现在有m的钱.每种B有一个单价和可以购买的数量上限.每个Ai可以由Ci种其他物品合成,给出Ci种其他物品每种需要的数量.每个装备有一个贡献值.求最大的贡献值. ...
-
typedef和define具体的具体差别
1) #define是预处理指令,在编译预处理时进行简单的替换,不作正确性检查,不关含义是否正确照样带入,仅仅有在编译已被展开的源程序时才会发现可能的错误并报错.比如: #define PI 3. ...
-
ASP.NET Core WebApi中使用FluentValidation验证数据模型
原文链接:Common features in ASP.NET Core 2.1 WebApi: Validation 作者:Anthony Giretti 译者:Lamond Lu 介绍 验证用户输 ...
-
OpenGL实例:三角形
OpenGL实例:三角形 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 更多请查看:计算机图形学 1. 三角形的旋转 #include <GL/ ...
-
Feature Extractor[inception v2 v3]
0 - 背景 在经过了inception v1的基础上,google的人员还是觉得有维度约间的空间,在<Rethinking the Inception Architecture for Com ...
-
IOS应用内嵌cocos2dx游戏项目
1.创建Cocos2d-x项目 相比于Android来说cocos2dx的iPhone环境基本不用配置,直接创建用xcode打开就可以运行. 到Cocos2d-x官方网站下载最新版本引擎. 将刚才下载 ...
-
ARC下野指针 EXC_BAD_ACCESS错误
一般都是多线程造成的,某一个线程在操作一个对象时,另一个线程将此对象释放,此时就有可能造成野指针的问题.一种解决办法是如果都是UI操作则将这些操作都放在主线程去执行. 通常出现此问题的地方都在RAC, ...