可視化：svg相關基礎

時間  2019-11-18
標籤 可視化 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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程