<!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'>

          <rect x='195' y='150' height='150' width='110' fill=' #09F3C7 ' stroke='#C7F309'

                 stroke-width='3' rx='5' ry='5'

             ></rect>   <!-- 参数解析 x y 圆心坐标  width height 宽高  rx ry 水平和垂直圆角的值 默认填充形式 填充颜色为黑色 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" -->

         </svg>

     </div>

 </body>

 </html>

[javascript svg fill stroke stroke-width x y rect rx ry 属性讲解] svg fill stroke stroke-width rect 绘制具有圆角矩形属性讲解的更多相关文章

  1. [javascript svg fill stroke stroke-width points polygon属性讲解] svg fill stroke stroke-width points polygon绘制多边形属性并且演示polyline和polygon区别讲解

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

  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. [javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解

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

  5. [javascript svg fill stroke stroke-width circle 属性讲解] svg fill stroke stroke-width circle 属性 绘制圆形及引入方式讲解

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

  6. IOS UI Frame 相对位置调整 与优化方法 Height Width X Y 调整

    不使用xib ,纯代码开发的过程中,动态UI  需要改对象的大小位置 反复使用CGRectMake 去 setFrame  非常低效耗时,而且 牵一发动全身. 以下整理出几个方法,方便动态布局 1.s ...

  7. JavaScript 中实现继承的方式（列举3种在前一章，我们曾经讲解过创建类的最好方式是用构造函数定义属性，用原型定义方法。）

    第一种:对象冒充 function ClassA(sColor) { this.color = sColor; this.sayColor = function () { alert(this.col ...

  8. 【Flutter学习】之绘画实例(一)

    一,概述 画布(Canvas) 画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容 Canvas 拥有多种绘制点.线.路径.矩形.圆形.以及添加图像等的方法,结合这些方法我们可以绘制出千变 ...

  9. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

随机推荐

  1. Elasticsearch聚合 之 Histogram 直方图聚合

    Elasticsearch支持最直方图聚合,它在数字字段自动创建桶,并会扫描全部文档,把文档放入相应的桶中.这个数字字段既可以是文档中的某个字段,也可以通过脚本创建得出的. 桶的筛选规则 举个例子,有 ...

  2. Elasticsearch聚合 之 DateRange日期范围聚合

    相比于range聚合,date range就是范围可以由时间来指定. 例如: { "aggs":{ "range":{ "date_range&quo ...

  3. [logstash-input-http] 插件使用详解

    插件介绍 Http插件是2.0版本才出现的新插件,1.x是没有这个插件的.这个插件可以帮助logstash接收其他主机或者本机发送的http报文. 插件的原理很简单,它自己启动了一个ruby的服务器, ...

  4. .Net魔法堂：开启IIS的WebGarden、WebFarm和StateServer之旅

    前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被投诉系统慢,报表下载不了等问题.究其原因,原来NLB采用锁定sessionI ...

  5. Winform如何实现ComboBox模糊查询

    最近朋友问了一个关于Winform实现ComboBox模糊查询的知识点,自己好久没有搞Winform了,就上手练了一下,废话不多说,进入正题. 前台设计: 前台就是一个简单的Form窗体+一个Comb ...

  6. DevExpress的XtraReport和微软RDLC报表的使用和对比

    我们开发程序的时候,经常会碰到一些报表,如果是Winform的报表,一般可以采用DevExpress控件组的XtraReport,或者微软的RDLC报表,当然还有一些其他的,在此不再赘述.由于本人在W ...

  7. C#中协变与抗变（逆变）

    泛型在.NET 2.0中正式的引入.在使用泛型的过程中,联系上面向对象的继承性.往往很容易想当然敲出类似以下代码 List<Animal> animalLst=new List<Do ...

  8. jQuery Mobile动态刷新页面样式

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...

  9. cros解决跨域

  10. 使用ActivityManager实现进程管理

    Android中使用ActivityManager可以获得进程信息,并对进程进行管理,如结束进程等.本文使用ActivityManager获得进程列表,并结束选中的进程. 首先,看看布局文件. < ...