SVG入门

svg 使用笔记

创建一个圆：
半径为40,圆心为(100,100), 填充色是红色
stroke表示边框
stroke-width表示边框线条的粗细

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="100" r="40" fill="red" stroke="black" stroke-width="3"></circle>
</svg>

创建一个矩形
fill,stroke等属性既可以直接写也可以写到style里
fill-opacity表示填充色的透明度

<svg>
      <rect width="200" height="100" fill="#0000ff" stroke="#000000" stroke-width="3"></rect> 
      <rect width="200" height="100" style="fill:red;stroke-width:6;stroke:rgb(0,0,0);fill-opacity:0.1" ></rect>
</svg>

创建一个圆角矩形

<svg width="800" height="600">
       <rect width="200" height="100" x="50" y="50" rx="10" ry="10"></rect>
</svg>

创建一个椭圆

<svg>
		<ellipse cx="100" cy="50" rx="100" ry="50" fill="yellow"></ellipse>
</svg>

创建一条直线

stroke-linecap:round线段开始结束用圆弧

<svg>
      <line x1=