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

          <line x1='195' y1='150' x2='350' y2='310' fill=' #09F3C7 ' stroke='#C7F309'

                 stroke-width='3' stroke-opacity = '.3' fill-opacity = '.9'

             ></line>   <!-- 参数解析 x1 y1 x2 y2 起止点坐标  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent

                                 是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->

         </svg>

     </div>

 </body>

 </html>

[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绘制线条属性讲解的更多相关文章

  1. 买茶叶想到的哪个比较便宜 x1/y1 >x2/y2 x代表多少钱 y代表 多少克 无聊的试炼

    茶叶1 128元     200克 茶叶2  330元    160克 当然这个哪个便宜 一眼就知道了,这里不过抛砖引玉 128元    330元 200克    160克 我们把价钱用x表示 多少克 ...

  2. hdu5794 A Simple Chess 容斥+Lucas 从(1,1)开始出发，每一步从(x1,y1)到达(x2,y2)满足(x2−x1)^2+(y2−y1)^2=5, x2>x1,y2>y1; 其实就是走日字。而且是往(n,m)方向走的日字。还有r个障碍物，障碍物不可以到达。求(1,1)到(n,m)的路径条数。

    A Simple Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  3. 点（x3,y3）到经过点（x1,y1）和点（x2,y2）的直线的最短距离

    /// <summary> /// 点(x3,y3)到经过点(x1,y1)和点(x2,y2)的直线的最短距离 /// </summary> /// <param name ...

  4. 点(x1, y1)关于点(x0, y0)逆时针旋转a度后的坐标求解

    问题描述: 求点(x1, y1)关于点(x0, y0)逆时针旋转a度后的坐标 思路: 1.首先可以将问题简化,先算点(x1, y1)关于源点逆时针旋转a度后的坐标,求出之后加上x0,y0即可. 2.关 ...

  5. 现在有一张半径为r的圆桌，其中心位于(x,y)，现在他想把圆桌的中心移到(x1,y1)。每次移动一步，都必须在圆桌边缘固定一个点然后将圆桌绕这个点旋转。问最少需要移动几步。

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<vector> ...

  6. HDU 4259(Double Dealing-lcm(x1..xn)=lcm(x1,lcm(x2..xn))

    Double Dealing Time Limit: 50000/20000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  7. [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 ...

  8. [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 ...

  9. [javascript svg fill stroke stroke-width x y rect rx ry 属性讲解] svg fill stroke stroke-width rect 绘制具有圆角矩形属性讲解

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

随机推荐

  1. 如何禁用事件的浮升（div的子元素的点击事件会触发父元素的点击事件）

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  2. Windows下Eclipse提交MR程序到HadoopCluster

    作者:Syn良子 出处:http://www.cnblogs.com/cssdongl 欢迎转载,转载请注明出处. 以前Eclipse上写好的MapReduce项目经常是打好包上传到Hadoop测试集 ...

  3. 搭建 Hexo Blog

    一.教程参考:https://xuanwo.org/2015/03/26/hexo-intor/ 二.命令总结 1.node -v.npm -v:查看 node.js 是否安装成功 2.npm ins ...

  4. C#微信公众平台开发—高级群发接口

    涉及access_token的获取请参考<C#微信公众平台开发—access_token的获取存储与更新> 一.为了实现高级群发功能,需要解决的问题 1.通过微信接口上传图文消息素材时,J ...

  5. WCF Throttling 限流的三道闸口

    WCF Throttling 限流的三道闸口 一.WCF Throttling  流量限制简介 我们期望WCF服务端能够处理尽可能多的并发请求,但是资源是有限的,服务不可能同时处理无限多的并发请求,如 ...

  6. 分析.Net里线程同步机制

    我 们知道并行编程模型两种:一种是基于消息式的,第二种是基于共享内存式的. 前段时间项目中遇到了第二种 使用多线程开发并行程序共享资源的问题 ,今天以实际案例出发对.net里的共享内存式的线程同步机制 ...

  7. Ado.net 三[SQL注入，DataAdapter，sqlParameter，DataSet]

    1.SQL注入:SQL注入攻击是web应用程序的一种安全漏洞,可以将不安全的数据提交给运用程序,使应用程序在服务器上执行不安全的sql命令.使用该攻击可以轻松的登录运用程序. 例如:该管理员账号密码为 ...

  8. Visual Studio统计代码行数

    按[Ctrl+Shift+F]弹出查找窗口(不统计以#号开头.以/开头的代码和空行) 1.输入  :b*[^:b#/]+.*$ 2.选择使用正则表达式 3.查找文件类型,*.cs多种类型用分号(;)隔 ...

  9. Oracle Database 11g For Windows7 旗舰版的安装

    系统环境:win7 32位系统 安装步骤: 1,Oracle(甲骨文)官网下载适合自己的数据库安装包,下载地址http://www.oracle.com/technetwork/cn/indexes/ ...

  10. Yii2.0学习笔记：第一个页面Saying Hello

    Controller目录下创建TestController.php 复制下面代码,yii跟tp一样,全程命名空间 <?php namespace app\controllers; use yii ...