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

线 <line>

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

首先创建line.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>

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

 

 <div>

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

  </div>

效果图：

 

折线 <polyline>

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

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

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

     viewBox="" version="1.1"

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

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

   

   <polyline points="20,20 20,100 100,100 100,200 200,200" fill="none" stroke="pink" stroke-width="6" style=""/>

</svg>

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

<div>

        <img src="polyline.svg" alt="">

    </div>

效果图：

 多边形 <polygon>

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

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

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

     viewBox="" version="1.1"

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

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

    <!-- 折线的点与点之间用空格间隔 -->

    <polyline points="20,150 50,50 150,50 180,150 20,150" fill="pink" stroke="lightblue" stroke-width="6" style=""/>

</svg>

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

 <div>

        <img src="ployline-a.svg" alt="">

    </div>

效果图：

 

————————————————
版权声明：本文为CSDN博主「芮芮的知识产权」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_71814235/article/details/125440733