SVG from entry to force (1)

svg files are xml-based vector graphics, while canvas is html and js-based bitmaps. Regarding the comparison between the two, I will not go into details in the rough.

1. First come the basic structure of the previous svg:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">

    <!-- svg file content -->

</svg>

What doctype needs to introduce is the DTD of the svg file specification, and the xmlns of the svg tag indicates that the svg specification of the W3C is to be followed.

2. How to import svg

***Can be imported via img tag

*** Can be imported via iframe tag

*** Can import svg through background image

***svg tags are imported directly

　　 <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <circle cx="100" cy="100" r="40" fill="red"></circle>
    </svg>

3. Common graphics

(1) Round

<circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
<circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-width:5;"></circle>

(2) Square (rx, ry set rounded corners)

<rect width="200" height="200" x="100" y="100" fill="red" rx="30"></rect>

(3) Straight line (x1, y1, x2, y2 are the coordinates of the two endpoints of the line segment; stroke-opacity is the transparency)

<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5" stroke-opacity
="0.5"></line>

4. svg common tags

(1) Group tag <g>

<!-- Only attributes common to all graphics can be written on the g tag, and transform attributes are commonly used for position movement --> 
    < svg xmlns ="http://www.w3.org/2000/svg" width ="100%" height ="100%" > 
        < g transform ="translate(200, 200)" stroke-width ="5" stroke ="red" > 
            < circle r ="40" fill ="transparent" ></ circle > 
            < circle r ="30" fill ="transparent" ></ circle >
            <circle r="20" fill="transparent"></circle>
            <circle r="10" fill="transparent"></circle>
        </g>
    </svg>

The effect is as follows

(2) Text label <text>

    <!-- text-anchor="middle" 水平居中  strat 以尾部对齐  end以开始对齐 -->
    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor:pointer">
            <circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle>
              <text x="200" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
        </g>
    </svg>

 

5. Pure html implements the basic svg structure group (js is commonly used in actual development to dynamically generate, this time a basic small demo)

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
        <g style="cursor:pointer">
            <line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
            <line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
            <rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
            <text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>    
        </g>
        <g style="cursor:pointer">
            <circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
            <text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>
        </g>
        <g style="cursor:pointer">
            <circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
            <text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
        </g>
    </svg>