SVG随笔

1.一个圆

//SVG 标签默认300px * 150px
<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
	<!-- cx，cy 相对于svg 的圆心的坐标，从左上角开始，r 圆的半径，stroke 边框的颜色， stroke-width 边框的宽度，fill 填充的颜色 -->
    <circle cx="100" cy="50" r="40" stroke="black" stroke-width="4" fill="red">
</svg>   

2.矩形

<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
    <!-- x 、 y 即相对于 SVG 的坐标，width、height 即矩形的宽高，fill-opacity 填充的透明度，stroke-opacity 边框的透明度 -->
    <rect x="100" y="10" width="100" height="100" style="fill: purple;stroke: red;stroke-width: 8;fill-opacity: .8;stroke-opacity: .8" />
</svg>

3.带圆角的矩形

<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
    <!-- rx x轴的半径(round元素)，ry y轴的半径(round元素) -->
    <rect x="50" y="20" rx="50" ry="50" style="width: 100px;height: 100px;fill: red;stroke: black;stroke-width: 5;opacity: .5" />
</svg>

4.一个椭圆

<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
    <!-- cx 、cy 相对于 SVG 的椭圆的中心坐标，rx 、ry 即从椭圆的中心开始平行于 x 轴的半轴、y 轴的半轴的长度 -->
    <ellipse cx="150" cy="80" rx="140" ry="70" style="fill: red;stroke: yellow;stroke-width: 5;" />
</svg>

5.垒叠而上的三个椭圆

<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
    <ellipse cx="150" cy="30" rx="140" ry="30" fill="red" />
    <ellipse cx="150" cy="50" rx="120" ry="40" fill="yellow" />
    <ellipse cx="150" cy="60" rx="100" ry="50" fill="skyblue" />
</svg>

6.两个椭圆

<svg xmlns="http://www.w3.org/2000/svg" verson="1.1">
    <ellipse cx="150" cy="70" rx="150" ry="50" fill="red" />
    <ellipse cx="150" cy="70" rx="140" ry="30" fill="white" />
</svg>