1<! DOCTYPE html>234<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>Ten<style type= ' text/css ' > One Html,body,div,svg { Amargin:0; padding:0; - } - the #wrap { -width:500px; height:450px; border:1px solid #999; border-radius:2px; margin:25px auto; - } - + svg { -height:100%; width:100%; + /*in Google Chrome, if you do not specify the size of SVG, use the default 300*150 size (you can check the focus on the label in the console {Element}), but the performance is different in Firefox A even if we do not specify the size of the SVG and specify the size of the parent element, the size of the SVG inherits the parent element; at */ - } -</style> -<script type= ' Text/javascript ' > -$(function(){ - in } ); -</script> to +<body> -<div id= ' wrap ' > the<svg xmlns= ' http://www.w3.org/2000/svg ' version= ' 1.1 ' > *<polyline points = ' a ', ' $, ' fill= ' Transparent ' stroke= ' #C7F309 ' $Stroke-width= ' 3 ' stroke-opacity = '. 3 ' fill-opacity = '. 9 'Panax Notoginseng></polyline> <!--parameter resolution points point coordinates each two is a group of groups and groups can be separated by commas, or can not be used directly separated from the space by default has a fill if you want to set to transparent (none/Transparent) Although none is the same as the transparent effect but the mechanism is completely different none is not populated transparent -Is transparent, outlines the stroke as no style = "fill: #09F3C7; stroke: #C7F309;" stroke-opacity = '. 3 ' fill-opacity = '. 9 '-- the</svg> +</div> A</body> the
[JavaScript svg fill stroke stroke-width points polyline Property explained] svg fill stroke stroke-width points polyline Draw Polyline Properties Explained