[翻译svg教程]svg中的circle元素
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 ...
随机推荐
- 在Centos中部署redis运行状态图形化监控工具 — RedisLive
写在前面 前两天看到张善友老师的一篇文章<先定个小目标, 使用C# 开发的千万级应用>,里面给出了一张腾讯OA基础服务中redis运行情况的一张监控图,然后想到自己的项目中前不久也上了re ...
- 解决pip安装超时
我们在使用python开发的时候总会需要安装很多第三方模块 比如我用flask搭建web, 需要很多第三方模块,比如flask-sqlalchemy, flask-bootstrap等等.而这些模块用 ...
- C#数字日期装换为中文日期
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 7九章算法强化班全解--------Hadoop跃爷Spark
------------------------------------------------------------第七周:Follow up question 1,寻找峰值 寻找峰值 描述 笔记 ...
- 点击页面判断是否安装app并打开,否则跳转app store的方法
常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用 ...
- Python: Windows 7 64位 安装、使用 pymongo 3.2
官网tutorial: http://api.mongodb.com/python/current/tutorial.html 本教程将要告诉你如何使用pymongo模块来操作MongoDB数据库. ...
- java中scanner类的用法
在Eclipse中编写程序时,如果我们的变量是需要手动输入的时候,我们就可以用到scanner类了. Scanner类,这是一个用于扫描输入文本的新的实用程序.由于任何数据都必须通过同一模式的捕获组检 ...
- 非旋treap模板
bzoj3580 非旋转treap 在大神教导下发现split一段区间时先split右边再split左边比较好写 #include <cstdio> #include <cstdli ...
- java方法强制传递引用参数(做为返回值),改变被传递参数值。
Java传递参数分为2种: 值类型,Java里面也叫简单类型,这种参数类型的传递的是它的副本拷贝: 引用类型,传递的是对象引用地址,如果在方法内改变该参数对象属性即是对原引用对象的改变:如果不想这样传 ...
- (3)WebApi客户端调用
1.创建一个应用台控制程序,可以把Model的引用,用下面的方法拖拽上来(解决方案里没有这个文件,只是这个文件的引用) 2.Program.cs using System; using System ...