svg1

svg是基于xml的技术

svg命名空间 xmlns=”http://www.w3.org/2000/svg”

在html中引入svg

<img src="xx.svg">
<div style="height:200px;width:200px; background:url(xxx.svg) no-repeat"
<iframe src="xxx.svg"></iframe>
//直接引svg
<svg xmlns="http://www.w3.org/2000/svg">
</svg>

基本图形:

circle
-cx cy r 横坐标 纵坐标 半径
-fill stroke stroke-width transparent none 填充颜色 边框颜色 边框宽度
-style 样式 style="fill:black;stroke:red;"

rect
-width height x y 宽度 高度 左上角坐标
-rx ry 圆角

line
-x1 y1 x2 y2
- stroke-opacity 线的透明度

<g>标签 里面的属性要是全部元素都具备的才可以 比如stroke
是一个容器(分组)标签,用来组合元素的
例子: 做个靶心 共用属性 transfrom="translate(100,100)"
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        height: 100vh;
    }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <g id="g1" fill="white" stroke="black" stroke-width="2" transform="translate(200,200)">
            <circle r="100"/>
            <circle r="80"/>
            <circle r="60"/>
            <circle r="40"/>
            <circle r="20"/>
        </g>
        <circle r="5" cx="200" cy="200" fill="red" />
    </svg>
</body>
</html>
text 文字
x y text-anchor
font-size
text-anchor="middle" start end

image
x y width height
xlink:href
<svg xmlns="http://www.w3.org/2000/svg" style="width: 100%;height: 100%;">
        <circle r="80" cx="200" cy="200" fill="transparent" stroke="black" stroke-width="2"/>
        <text x="200" y="208" font-size="16px" text-anchor="middle" fill="red">我了个操</text>
    </svg>