[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 <!DOCTYPE html>
 2 <html lang=‘zh-cn‘>
 3 <head>
 4 <title>Insert you title</title>
 5 <meta name=‘description‘ content=‘this is my page‘>
 6 <meta name=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 8 <link rel=‘stylesheet‘ type=‘text/css‘ href=‘./css/index.css‘ />
 9 <script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
10 <style type=‘text/css‘>
11 html,body,div,svg {
12     margin: 0; padding: 0;
13 }
14
15 #wrap {
16     width: 500px; height: 450px; border: 1px solid #999; border-radius: 2px; margin: 25px auto;
17 }
18
19 svg {
20     height: 100%; width: 100%;
21     /* 在谷歌浏览器中如果不指定svg的大小,那么使用默认的300*150大小(将焦点放置在调控台{Element}中的标签上可以检查),但是在火狐中表现却不同
22     即使我们不指定svg的大小,指定父元素的大小,那么svg的大小将继承父元素;
23      */
24 }
25 </style>
26 <script type=‘text/javascript‘>
27     $( function(){
28
29     } );
30 </script>
31 </head>
32 <body>
33     <div id=‘wrap‘>
34         <svg xmlns=‘http://www.w3.org/2000/svg‘ version=‘1.1‘>
35          <line x1=‘195‘ y1=‘150‘ x2=‘350‘ y2=‘310‘ fill=‘ #09F3C7 ‘ stroke=‘#C7F309‘
36                 stroke-width=‘3‘ stroke-opacity = ‘.3‘ fill-opacity = ‘.9‘
37             ></line>   <!-- 参数解析 x1 y1 x2 y2 起止点坐标  如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
38                                 是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = ‘.3‘ fill-opacity = ‘.9‘-->
39         </svg>
40     </div>
41 </body>
42 </html>
时间: 2024-10-16 17:35:37

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

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

茶叶1 128元     200克 茶叶2  330元    160克 当然这个哪个便宜 一眼就知道了,这里不过抛砖引玉 128元    330元 200克    160克 我们把价钱用x表示 多少克用y表示 x>0 y>0 已知 x1           x2 ~       >    ~ y1           y2 推导初x1y2>x2y1 可是为什么呢 假设 x2=x1*k1 y2=y1*k2 第一步 得到 x1       x1*k1 ~    >     ~ y

hdu5794 A Simple Chess 容斥+Lucas 从(1,1)开始出发,每一步从(x1,y1)到达(x2,y2)满足(x2?x1)^2+(y2?y1)^2=5, x2&gt;x1,y2&gt;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)Total Submission(s): 2597    Accepted Submission(s): 691 Problem Description There is a n×m board, a chess want to go to the position (n,m) from the pos

已知直线上的两点 A(x1, y1), B(x2, y2) 和另外一点 C(x0, y0),求C点到直线的距离。

数学知识太差,一点点积累,高手勿喷. 1. 先求出AB向量 a = ( x2-x1, y2-y1 ) 2. 求AB向量的单位方向向量 b = √((x2-x1)^2 + (y2-y1)^2)) a1 = ( (x2-x1)/b, (y2-y1)/b ) 3.求出CA的法向向量(或CB的法向向量) c = ( y0-y1, -(x0-x1) ) 4. 距离 = AC法向向量与BC向量的单位方向向量的数量积 距离d = a1 * c = ( (x2-x1)(y0-y1) - (y2-y1)(x0-x

点(x3,y3)到经过点(x1,y1)和点(x2,y2)的直线的最短距离

/// <summary> /// 点(x3,y3)到经过点(x1,y1)和点(x2,y2)的直线的最短距离 /// </summary> /// <param name="pt1"></param> /// <param name="pt2"></param> /// <param name="pt3"></param> /// <return

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) Total Submission(s): 1924    Accepted Submission(s): 679 Problem Description Take a deck of n unique cards. Deal the entire deck out to k players in

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

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

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

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

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

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt

[javascript svg fill stroke stroke-width rx ry ellipse 属性讲解] svg fill stroke stroke-width ellipse 绘制椭圆属性讲解

1 <!DOCTYPE html> 2 <html lang='zh-cn'> 3 <head> 4 <title>Insert you title</title> 5 <meta name='description' content='this is my page'> 6 <meta name='keywords' content='keyword1,keyword2,keyword3'> 7 <meta htt