zoukankan      html  css  js  c++  java
  • 可视化: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="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-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",  '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, 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>
    

  • 相关阅读:
    maven:读取程序版本号的三种方案
    有无目标的人生差10倍!赶紧和娃把新年计划做起来
    都怎么了,其实早就知道,但是一直没有找到答案……
    python添加tab键功能
    电影观后感
    ipset批量配置iptables
    Oracle 触发器,事物
    Oracle PL/SQL高级应用 视图 同义词 序列
    Oracle PL/SQL高级应用 存储过程
    Oracle PL/SQL高级应用 游标
  • 原文地址:https://www.cnblogs.com/leee/p/7471349.html
Copyright © 2011-2022 走看看