零基础html学习-完结

svg先更新至此，会单独开辟一个专栏来更新svg的。

感谢大家对本专栏的支持。

一、SVG绘制文本

<text></text>

 属性：

x：文本位置的横坐标

y：文本位置的纵坐标

font-size：文本的大小

text-anchor：文本对齐方式（start、middle、end）

transform：变换

transform="rotate(旋转角度 旋转中心点坐标)"

默认坐标（0,0）

在一个元素中，文本和字体属性以及当前的文本位置可以通过包含一个元素用绝对坐标值或相对坐标值进行调整。

给文本添加链接

<svg xmlns="http://www.w3.org/2000/svg">
       <a xlink:href='' target=" ">
           <text>
               
           </text>
       </a>
    </svg>

二、绘制路径

:应用路径可以绘制任意形状的图形。

d：绘制路径的命令

M（move to）：定义绘制图形的起点坐标。

d="M150 0"

l（line to）：用来绘制一条直线。

d="M150 0 l75 200"
//起点（150,0） 结束（75,200）

命令大写表示绝对定位（相对于屏幕坐标原点的位置）

小写表示相对定位（相对于上一个绘制的点）

把多个绘图元素包裹起来。

三、svg描写

<path stroke stroke-width stroke-linecap stroke-dasharray>

stroke：笔画属性

stroke-width：笔画宽度属性

stroke-linecap：笔画笔帽属性。

         值：square方形笔帽   round圆形笔帽 butt没有线帽

stroke-dasharray：虚线笔画属性。