Zero-based html learning-end

The svg is updated to this point first, and a separate column will be opened to update the svg.

Thank you for your support of this column.

1. SVG drawing text

<text></text>

 Attributes:

x: the abscissa of the text position

y: the vertical coordinate of the text position

font-size: the size of the text

text-anchor: text alignment (start, middle, end)

transform: transform

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

Default coordinates (0,0)

Within an <text>element, text and font properties as well as the current text position can be <tspan>adjusted with absolute or relative coordinates by including an element.

add link to text

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

2. Draw the path

<path />: The application path can draw graphics of any shape.

d: commands for drawing paths

M (move to): Define the coordinates of the starting point for drawing graphics.

d="M150 0"

l (line to): used to draw a straight line.

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

Command uppercase indicates absolute positioning (position relative to the origin of the screen coordinates)

Lowercase indicates relative positioning (relative to the last drawn point)

<g></g> wraps multiple drawing elements.

Three, svg description

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

stroke: stroke attribute

stroke-width: stroke width attribute

stroke-linecap: Stroke linecap attribute.

         Value: square square cap round round cap butt no wire cap

stroke-dasharray: Dashed line stroke attributes.