【H5】 svg可缩放矢量图形标签

【H5】 svg可缩放矢量图形标签

<svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'></svg>

circle 画圆：

<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
   <!-- cx,cy圆心位置  r半径  fill=transparent填充透明  stroke=blue边框蓝色 -->
   <circle cx='250' cy='250' r='100' fill='transparent' stroke='blue'></circle>
</svg>

画矩形：

<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
   <!-- cx,cy圆心位置  r半径  fill=transparent填充透明  stroke=blue边框蓝色 -->
   <rect width='100' height='100' x=150 y=150 fill='pink' stroke='#000' stroke-width="10"></rect>
</svg>

polygon 画五角星：

<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
   <!-- points:内每相邻两个数都是一个点的位置 -->
   <polygon points='275 80 190 345 414 185 130 185 360 345' stroke='pink'  stroke-width="10" fill-rule="evenodd" ></polygon>
</svg>

g 画靶子：

<svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
   <!-- g标签:组合元素 设置元素公共属性 共用属性 transform = "translate(0,0)" -->
   <g transform="translate( 250 ,250 )" >
        <circle cx='0' cy='0' r='50'  fill='none' stroke='blue'></circle>
        <circle cx='0' cy='0' r='100' fill='none' stroke='blue'></circle>
        <circle cx='0' cy='0' r='150' fill='none' stroke='blue'></circle>
        <circle cx='0' cy='0' r='200' fill='none' stroke='blue'></circle>
        <circle cx='0' cy='0' r='250' fill='none' stroke='blue'></circle>
    </g>
</svg>