今天分享“svg绘制圆形”部分

1、简单圆形

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="40" cy="40" r="40"></circle>
</svg>

代码解析:

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0);

r属性定义圆的半径

2、圆形填充颜色及边框

效果图如下:

关键代码:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="45" cy="45" r="40" stroke-width="3" stroke="blue" fill="red"></circle>
</svg>

代码解析:

fill 属性定义圆形的填充颜色(rgb 值、颜色名或者十六进制值);

stroke-width 属性定义圆形边框的宽度;

stroke 属性定义圆形边框的颜色

好了今天的分享这里结束,我也是一边学习一边分享的,若有错误的地方请大家指正,下次分享“svg绘制椭圆”部分,希望大家届时来浏览,谢谢大家。

SVG绘制圆形简单示例分享的更多相关文章

  1. SVG绘制矩形简单示例分享

    最近我初学HTML5,刚在一步步学习SVG,积累了一些个人心得和程序代码,希望和大家分享,今天分享“svg之矩形”部分 1.简单矩形 效果图如下: 关键代码: <svg xmlns=" ...

  2. svg绘制一个简单地饼图

    一个简单地svg绘制饼图的demo,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  3. PHP 使用memcached简单示例分享

    1.添加扩展包 代码如下: php_memcache.dll 2.在PHP.INI添加  代码如下: extension=php_memcache.dll 3.程序 代码如下: < ?php / ...

  4. 【重点突破】——SVG技术动态随机绘制圆形

    一.引言 在学习Canvas绘图技术时,做的是随机验证码的例子,在学习SVG绘图技术时,同样也有一个随机绘制的例子——动态随机绘制圆形.这个练习,即综合了多种SVG技术的知识点,又很具有艺术感,随机生 ...

  5. ABAP分享一 弹出框函数的简单示例

    在开发中经常会使用到弹出框这个功能,在SAP中有很多函数可以实现类似的功能,这里介绍一个比较简单常用的函数  POPUP_TO_CONFIRM 下面是一个实现的简单示例: TABLES sscrfie ...

  6. 18个超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了18个非 ...

  7. 程序猿必备的10款超有趣的SVG绘制动画赏析

    SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物.小图标.小动画等等.今天我们收集了10个非 ...

  8. canvas快速绘制圆形、三角形、矩形、多边形

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:项目代码github地址,喜 ...

  9. android绘制圆形图片的两种方式

    看下效果先 下面有完整的示例代码 使用BitmapShader(着色器) 我们在绘制view 的时候 就是小学上美术课 用水彩笔在本子上画画 使用着色器绘制圆形图片最简单的理解方式 就是把bitmap ...

随机推荐

  1. 用gooreplacer来加速你的浏览器

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用gooreplacer来加速你的浏览器.

  2. excel多个文件合并

    多个excel文件合并成一个需要用ms office wps是不行的 1.将所有文件放在一个文件夹里 2.在文件夹里新建一个空的excel打开 右键sheet点击查看代码->输入下面代码-> ...

  3. 使用webview如何做超时判断

    在加载网页时给一个timer定时器,规定超时时间,然后再超时时间的方法中提示超时 如果没有超时,则在webview协议中的“加载完成”方法中 取消timer定时器 - (void)openWebVie ...

  4. 图像处理界的标准图像Lena背后的故事

    今天晚上实验室的哥们问到我:“蒋志强,你知道咱们数字图像处理界标准图像Lena吗?” “当然知道啊,不就是那个512×512的美丽姐姐的标准图像么?”我不以为然的回答: “那幅图像事实上不是原始图像? ...

  5. [GIF] GIF Loop Coder - Animating with Arrays

    In this lesson, we discuss animating using arrays, and how different data types are interpolated whi ...

  6. [React] React Fundamentals: Add-on ClassSet() for ClassName

    To get the add-ons, use react-with-addons.js (and its minified counterpart) rather than the common r ...

  7. Eclipse启动时报需要安装"Java SE 6 Runtime"致无法启动解决方案

    今天心血来潮,把MBP升级到了osx mavericks,然后启动了闲置好久的eclipse,启动时居然报错了: 若要打开Eclipse.app,您需要Java SE 6 runtime,您想现在安装 ...

  8. 在含有null值的复杂类的集合(Collection)中取最大值

    在日常编程中,经常遇到要在一组复杂类的集合(Collection)中做比较.取最大值或最小值. 举个最简单的例子,我们要在一个如下结构的集合中选取包含最大值的元素: public class Clas ...

  9. flash解析json格式

    flash对于json格式的解析在Flash CS6的版本对于json格式的数据提供了支持,用以下方式即可以进行转换: var persons = JSON.parse('[{"name&q ...

  10. 如何使用axis2 构建 Android 服务器后端--- 工具准备与环境配置

    最近一个项目要做个android端的实验室器材管理系统.小伙伴英勇地接下android端的锅,我就 负责给他写后端,最近看到axis2 这个webservice挺好用的,折腾了几天给大家分享下: 1. ...