<!DOCTYPE html>

 <html lang='zh-cn'>

 <head>

 <title>Insert you title</title>

 <meta name='description' content='this is my page'>

 <meta name='keywords' content='keyword1,keyword2,keyword3'>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <link rel='stylesheet' type='text/css' href='./css/index.css' />

 <script type='text/javascript' src='./js/jquery-1.12.1.min.js'></script>

 <style type='text/css'>

 html,body,div,svg {

     margin: 0; padding: 0;

 }

 #wrap {

     width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;

 }

 svg {

     height: 100%; width: 100%;

     /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同

     即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;

      */

 }

 </style>

 <script type='text/javascript'>

     $( function(){

     } );

 </script>

 </head>

 <body>

     <div id='wrap'>

         <svg xmlns='http://www.w3.org/2000/svg' version='1.1'>

         <!--

               在html文件中的引入方式 :

               参数解析 : xmlns(XML nameSpace 译为XML文档的命名空间 ) 地址为:http://www.w3.org/2000/svg XML的版本号位1.1, 默认的"画布"大小300*150

               在svg中和canvas画布不同的是,canvasReading2D提供了很多属性和方法,但是在svg中我们只需使用标签就可以实现基本的图形绘制了,如果要实现高级的图形效果还是要结合JS的

          -->

          <circle cx='250' cy='225' r='50' fill=' #09F3C7 ' stroke='#C7F309' stroke-width = '3'></circle>

         <!-- 参数解析 cx cy 圆心坐标  r 半径 默认填充形式 填充颜色为黑色 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" -->

         </svg>

     </div>

 </body>

 </html>

[javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解的更多相关文章

  1. 项目复习期总结3：CSS引入方式，凝视，命名规范，背景，行高，文本属性

    文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ...

  2. [javascript svg fill stroke stroke-width points polyline 属性讲解] svg fill stroke stroke-width points polyline 绘制折线属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. [javascript svg fill stroke stroke-width x1 y1 x2 y2 line stroke-opacity fill-opacity 属性讲解] svg fill stroke stroke-width stroke-opacity fill-opacity line绘制线条属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  4. java定义一个Circle类，包含一个double型的radius属性代表圆的半径，一个findArea()方法返回圆的面积

    需求如下:(1)定义一个Circle类,包含一个double型的radius属性代表圆的半径,一个findArea()方法返回圆的面积. (2)定义一个类PassObject,在类中定义一个方法pri ...

  5. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  6. SVG绘制圆形简单示例分享

    今天分享“svg绘制圆形”部分 1.简单圆形 效果图如下: 关键代码: <svg xmlns="http://www.w3.org/2000/svg" version=&qu ...

  7. 8个实用的SVG工具，20 个有用的 SVG 工具，五款超实用的开源SVG工具

    8个实用的SVG工具 [导读] 你还在为没有好用的SVG工具而发愁吗?开发人员的福音来啦!小编为大家收集罗列了8款实用的SVG工具,让我们一起来看看吧! SVG可缩放矢量图形(Scalable Vec ...

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

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

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. 初探JavaScript（一）——也谈元素节点、属性节点、文本节点

    Javascript大行其道的时候,怎么能少了我来凑凑热闹^_^ 基本上自己对于js的知识储备很少,先前有用过JQuery实现一些简单功能,要论起JS的前世今生,来龙去脉,我就一小白.抱起一本< ...

  2. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  3. 你真的精通 CSS 了？来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

  4. 【Java基础】枚举和注解

    在Java1.5版本中,引入了两个类型:枚举类型enum type和注解类型annotation type. Num1:用enum代替int常量 枚举类型enum type是指由一组固定的常量组成合法 ...

  5. JAVA 设计模式 状态模式

    用途 状态模式 (State) 当一个对象的内在状态改变时允许改变其行为,这个对象看起来像是改变了其类. 状态模式是一种行为型模式. 结构

  6. [爬虫资源]各大爬虫资源大汇总,做我们自己的awesome系列

      大数据的流行一定程序导致的爬虫的流行,有些企业和公司本身不生产数据,那就只能从网上爬取数据,笔者关注相关的内容有一定的时间,也写过很多关于爬虫的系列,现在收集好的框架希望能为对爬虫有兴趣的人,或者 ...

  7. python注释

    初学python 习得注释方法 如下: #我是注释 print("hello") ''' 我是 多行 注释! ''' 其实就是#号和三个单引号(也可以双引号)啦 看下面:这注释其实 ...

  8. 实现多表关联来方便你的SELECT查询功能

    这次来学习一下多表关联.比如在数据中创建下面几张表,你可以从主键PRIMARY KEY与外键FOREIGN KEY来看到这几张表它们之间的关系. 场所表[dbo].[SixS_Location]: 主 ...

  9. 在Winform开发中使用日程控件XtraScheduler

    在一些应用场景中,我们可能需要记录某一天,某个时段的日程安排,那么这个时候就需要引入了DevExpress的日程控件XtraScheduler了,这个控件功能非常强大,提供了很好的界面展现方式,以及很 ...

  10. ASP.NET MVC 请求流程：Route

    1.RouteTable RouteTable翻译过来的意思就是路由表,一个Web应用程序具有一个全局的路由表,该路由表通过System.Web.Routiing.RouteTable的静态只读属性R ...