可视化：svg相关基础

时间：2023-03-09 05:19:08
可视化：svg相关基础

01.svg的嵌入.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>svg的嵌入方式</title>

</head>

<body>

    <h1>svg的6种嵌入方式</h1>

    <!-- svg、图片、背景、iframe、object、embed 、-->

    <!-- 直接写svg -->

    <svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <circle cx="100" cy="100" r="20" fill="red" />

    </svg>

    <!-- img -->

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

    <!-- background -->

    <div style="width:200px;height:200px;display:inline-block;background-image:url('svg.svg')"></div>

    <!-- iframe -->

    <iframe src="svg.svg"></iframe>

    <!-- embed pluginspage下插件-->

    <embed src="svg.svg" width="200" height="200" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/"/>

    <!-- object codebase下插件-->

    <object data="svg.svg" width="200" height="200" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"/>

</body>

</html>

运行

02.svg基本图形.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>6种基本图形</title>

</head>

<body>

    <!-- 起点 终点 对应的x，y像定位后的left top值-->

    <!-- 6种基本图形line, rect, ellipse, circle, polyline, polygon-->

    <!-- points'空格'或者'逗号'  像path(路径)/polyline(折线)/polygon(多边形)都用到多点（points）-->

    <!-- 折线 不闭合。多边形闭合-->

    <svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <!-- 线 起点 终点 -->

        <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2"/>

        <!-- 矩形 起点(左上角) 宽高 -->

        <rect x="100" y="0" width="150" height="100"/>

        <!-- 圆 中心点 半径 -->

        <circle cx="300" cy="50" r="50" />

        <!-- 椭圆 中心点 x y半径-->

        <ellipse cx="425" cy="50" rx="75" ry="50"/>

        <!-- 折线 多个点（逗号或者空格）  -->

        <!-- 多条线连接起来角，没有棱角  -->

        <polyline points="500 0 600 50 550 100" fill='none' stroke="black" stroke-width="20"/>

        <line x1="500" y1="100" x2="600" y2="150" stroke="black" stroke-width="20"/>

        <line x1="600" y1="150" x2="550" y2="200" stroke="black" stroke-width="20"/>

        <!-- (首尾闭合的折线) 多边形 多点（逗号或者空格） -->

        <polygon points="600,0,700,50,650,100" fill='none' stroke="black" stroke-width="2"/>

    </svg>

</body>

</html>

运行

03.svg基本样式.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>基本样式</title>

</head>

<body>

    <!--

        位置（x，y，r）的属性不能写到style里面，其余可以

        width height    rect拥有这样的属性

        fill="red"      默认填充黑色色（常用transparent,none）

        stroke="black"  边框色

        stroke-width="2" 边框宽

    -->

    <!--拿circle举例子-->

    <svg width="1000" height="1000" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

        <!-- 圆 中心点 半径 -->

        <circle cx="50" cy="50" r="50"  fill="red" stroke="black" stroke-width="2"/>

        <circle cx="50" cy="150" r="50"  style="fill:transparent; stroke:black; stroke-width:2;"/>

    </svg>

</body>

</html>

运行

04.svg用js操作.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>js操作svg</title>

</head>

<body>

    <script>

        let getTag = (name, attrs) => {

            let svg = document.createElementNS('http://www.w3.org/2000/svg', name);

            for (var attr in attrs) {

                //这里全部使用属性，并没有使用样式

                svg.setAttribute(attr, attrs[attr])

            }

            return svg;

        }

        let svg = getTag('svg', { xmlns: 'http://www.w3.org/2000/svg', 'xmlns:xlink': "http://www.w3.org/1999/xlink", version: "1.1", width: '100%', height: '100%', viewBox: "0 0 1000 1000", });

        document.querySelector('body').appendChild(svg);

        let line = getTag('line', { x1: 0, y1: 0, x2: 100, y2: 100, stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(line);

        let rect = getTag('rect', { x: 100, y: 0,width: 150, height: 100, fill: 'none',stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(rect);

        let circle = getTag('circle', { cx:"300", cy:"50", r:"50" ,fill: 'none',stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(circle);

        let ellipse = getTag('ellipse', { cx:"425", cy:"50" ,rx:"75" ,ry:"50", fill: 'none',stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(ellipse);

        let polyline = getTag('polyline', { points:"500 0 600 50 550 100", fill: 'none',stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(polyline);

        let polygon = getTag('polygon', { points:"600,0,700,50,650,100", fill: 'none',stroke: 'green', 'stroke-width': 5 });

        document.querySelector('svg').appendChild(polygon);

111

    </script>

</body>

</html>

运行

05.svg结构标签g.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="author" content="李可">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>js操作svg</title>

</head>

<body>

    <svg width="1000" height="1000">

        <!-- 圆 中心点 半径 -->

        <circle cx="100" cy="100" r="50" fill="none" stroke="black" stroke-width="2" />

        <circle cx="100" cy="100" r="60" fill="none" stroke="black" stroke-width="2" />

        <circle cx="100" cy="100" r="70" fill="none" stroke="black" stroke-width="2" />

        <!--

             将公用的属性抽离出来赋值给g标签

             但是:  标签特有的放到g标签上不起作用。

             比如circle的 cx cy r  line的x1

             g标签内全部是circle也不能抽离cx cy r等

        -->

        <g stroke="black" stroke-width="2" fill="none">

            <circle cx="300" cy="100" r="50" />

            <circle cx="300" cy="100" r="60" />

            <circle cx="300" cy="100" r="70" />

            <line x1="300" y1="100" x2="400" y2="200" />

        </g>

        <!--

            但是这些不能抽离的属性大部分是跟位置有关

            使用transform变换来代替

        -->

        <g  transform="translate(600,100)"stroke="black" stroke-width="2" fill="none">

            <circle  r="50" />

            <circle  r="60" />

            <circle  r="70" />

            <line x1="300" y1="100" x2="400" y2="200" />

        </g>

        <!--

            这时line是基于transform之后的距离再移动

        -->

        <g  transform="translate(800,100)"stroke="black" stroke-width="2" fill="none">

            <circle  r="50" />

            <circle  r="60" />

            <circle  r="70" />

            <line x1="0" y1="0" x2="100" y2="0" />

        </g>

    </svg>

</body>

</html>

运行

相关文章