Fork me on GitHub

李可

导航

统计

可视化：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>

posted on   李可在江湖  阅读(532)  评论(0)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae