[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>
<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'>
<polyline points='20 25 ,70 65 ,150 300, 15 400' fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polyline>
<!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->
<polygon points='320 25 90 75 ,150 250, 30 225' fill=' transparent ' stroke='#C7F309' stroke-width='3' ></polygon>
<!-- 参数解析 points 点的坐标 每两个算是一组 组与组之间可以使用逗号做间隔,也可以不使用 直接与空格相隔开 默认有填充 如果想设置为透明(none/transparent)虽然none与transparent效果相同但是机理完全不同none是没有填充 transparent
是透明, 勾勒描边为无 style = "fill:#09F3C7 ;stroke:#C7F309;" stroke-opacity = '.3' fill-opacity = '.9'-->
<!-- polyline : 译为折线 polygon 译为多边形 折现的交换点在线段末尾的中心点(将绘制的线段放大可以观察到)并且在闭合路径(将结束点设置为起始点 )的时候会出现问题
多边形具有自动闭合的左右,可以实现完美闭合并且不用将结束点设置为起始点 -->
</svg>
</div>
</body>
</html>
[javascript svg fill stroke stroke-width points polygon属性讲解] svg fill stroke stroke-width points polygon绘制多边形属性并且演示polyline和polygon区别讲解的更多相关文章
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- [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 ...
- svg web拓扑更新了，支持动态添加svg组件
版本1.0请点此 预览地址 https://svg.yaolunmao.top 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webto ...
- Leaflet：Path、Polyline、Polygon、Rectangle、Circle、CircleMarker
下边介绍Vector Layer Path(Layer) Path是其他Vector Layer的父类,比如Polyline.Polygon.Rectangle.Circle.CircleMarker ...
- 【Silverlight】Bing Maps学习系列（五）：绘制多边形（Polygon）图形（转）
[Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...
- JavaScript+canvas 绘制多边形
效果图: <body> <canvas id="square" width="500"></canvas> <canv ...
随机推荐
- Android抓包方法(二)之Tcpdump命令+Wireshark
Android抓包方法(二) 之Tcpdump命令+Wireshark 前言 做前端测试,基本要求会抓包,会分析请求数据包,查看接口是否调用正确,数据返回是否正确,问题产生是定位根本原因等.学会抓包分 ...
- File Type Icons – 免费扁平设计风格文件类型图标集
这套扁平风格图标集包含一组62个不同的文件类型图标,有 AI,ICO和 PNG 三种格式.他们采用长阴影模式的扁平化设计,看起来非常整齐和现代化.这些图标是完全免费的,可以用于商业项目. 您可能感兴趣 ...
- 报告一个IE很奇葩的滚动条问题——百分比计算宽度为浮点数时的滚动条显示异常
起因: 做项目的时候做了一个表格内容超过DIV容器自动横向滚动处理.别的浏览器都正常:但是在IE下面明明表格table和容器DIV宽度一致但是却出现了滚动条.如图 然后本人做实验找了半天原因终于是找到 ...
- ASP.Net 获取服务器信息
1: Response.Write("服务器机器名:" + Server.MachineName); 2: Response.Write("<br/>&quo ...
- 基于HTML5树组件延迟加载技术实现
HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...
- CSS魔法堂：说说Float那个被埋没的志向
前言 定位系统中第一难理解就是Normal flow,而第二就非Float莫属了,而Float难理解的原因有俩,1. 一开头我们就用错了:2. 它跟Normal flow靠得太近了.本文尝试理清Fl ...
- 一、Stream,sink,source,transform
1. 蓝牙核心概述 2.Stream,sink,source,transform 在ADK的blueCore里面,Stream作为一个逻辑结构用来描述一个数据终点(data Endpoint).通常, ...
- 30天C#基础巩固----Lambda表达式
这几天有点不在状态,每一次自己很想认真的学习,写点东西的时候都会被各种小事情耽误,执行力太差.所以自己反思了下最近的学习情况,对于基础的知识,可以从书中和视频中学习到,自己还是需要注意下关于 ...
- Sandcastle入门：创建C#帮助文档
Sandcastle入门:创建C#帮助文档 今天学到了一个东西:利用vs2005生成的dll/xml来生成帮助文档. 完成这个伟大任务的是Sandcastle,微软推出的类库文档编译工具. 在开始这篇 ...
- jQuery Pagination分页插件的使用
一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...