SVG有一些预定义的形状元素（上）

SVG有一些预定义的形状元素 ：

• 矩形 <rect>

• 圆形 <circle>

• 椭圆 <ellipse>

• 线 <line>

• 折线 <polyline>

• 多边形 <polygon>

• 路径 <path>

矩形的方法

我们可以用属性，去设置这个矩形的边框线和填充色：

首先创建rect1.svg文件，输入svg-svg，回车

<svg width="600" height="600"

     viewBox="" version="1.1"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">

  <!-- svg-rect -->

    <rect x="200" y="200" width="300" height="200"  fill="red" stroke="blue" stroke-width="6" style=""/>

</svg>

要做的：我们可以用style行内样式，去设置这个矩形的边框线和填充色：

然后在html中输入英文格式下的！，然后在body里面输入

 <div>

    <a href="rect1.svg">查看rect1.svg文件</a>

  </div>  

效果图：

 

椭圆 <ellipse>

首先创建ell.svg文件，输入svg-svg，回车

svg里输入svg-e,如下所示

<svg width="" height=""

     viewBox="" version="1.1"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">

   

    <ellipse cx="300" cy="300" rx="300" ry="150"  fill="red" stroke="blue" stroke-width="6" style=""/>

</svg>

然后在html中输入英文格式下的！，然后在body里面输入

 <div>

    <a href="ell.svg">查看ell.svg文件</a>

  </div>

效果图：

椭圆叠加效果多个椭圆，在数据上改动即可

<svg width="" height=""

     viewBox="" version="1.1"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">

    <!-- svg-e -->

<!-- 主要是练习坐标位置的调整 ，观察 图形 各自的显示位置 -->

    <ellipse cx="340" cy="200" rx="100" ry="50" fill="pink"  style=""/>

    <ellipse cx="340" cy="170" rx="100" ry="50" fill="skyblue" style=""/>

    <ellipse cx="340" cy="130" rx="100" ry="50" fill="blue" style=""/>

</svg>

如下所示：