无废话，基础的svg画法，慢慢更新

<!DOCTYPE html>
<!--
 *  Copyright (c) 2015 The WebRTC project authors. All Rights Reserved.
 *
 *  Use of this source code is governed by a BSD-style license
 *  that can be found in the LICENSE file in the root of the source
 *  tree.
-->
<html>
<head>
    <title>webrtc sfu-钱波</title>
    <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
    <style>
        video {
            border: 1px solid black;
            width: 640px;
            height: 360px;
        }

        .local {
            border: 1px solid red;
            width: 640px;
            height: 360px;
        }

        .red {
            fill: red;
        }

        .fancy {
            fill: none;
            stroke: black;
            stroke-width: 3pt;
        }

        #testSvg {
            border: 1px solid #ccc;
        }
        .testSvg {
            border: 1px solid #ccc;
        }
            #testSvg circle {
                fill: red;
                stroke: blue;
                stroke-width: 1;
            }
    </style>
</head>
<body>
    <video id="vid2" autoplay></video>
    <video class="local" id="localVideo" autoplay muted playsinline></video>
    <br>
    <!--<button id="btn1">发送</button>
    <button id="btn3">结束</button>-->

    <svg width="300" height="180">
        <circle cx="30" cy="50" r="10" />
        <circle cx="90" cy="50" r="10" class="red" />
        <circle cx="150" cy="50" r="10" class="fancy" />
    </svg>
    <br />
    <svg width="300" height="180">
        <line x1="0" y1="0" x2="200" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
    </svg>

    <svg width="400px" height="200px" id="testSvg">
        <line x1="0" y1="0" x2="10" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="0" y1="0" x2="0" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="400" y1="0" x2="400" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="390" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />

        <line x1="0" y1="200" x2="0" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="0" y1="200" x2="10" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="400" y1="200" x2="400" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
        <line x1="400" y1="200" x2="390" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
        <circle cx="350" cy="100" r="20" fill="red" id="testCircle"></circle>
    </svg>
    <br/>

    <svg width="600" height="600" class="testSvg">

        <rect x="0" y="0" width="100" height="100" fill="#f06" />
        <rect x="100" y="100" width="200" height="100" fill="black" />
    </svg>
</body>
<script src="js/adapter.js"></script>
<script type="text/javascript">
    var circle = document.getElementById("testCircle");
    circle.addEventListener("click", function (e) {
        console.log("Click circle ...");
        circle.setAttribute("r", 65);
    }, false);
</script>
<!--<script src="js/main.js"></script>-->
</html>
# html5
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

cover

C#联合Halcon深度学习源代码分享1 预处理图像2图像识别测试3误差分析（含导入步骤文档，含中文注释） （附源码链接）

avatar 开放原子开发者工作坊

Git基础命令学习

git基础命令学习笔记git init 命令目录变成 Git 可以管理的仓库git add 把文件添加到仓库(可多次add不同的文件)git commit 把文件提交到仓库git satus 命令查看状态，可以让我们时刻掌握仓库当前的状态git diff可以看到指定文件的修改内容

avatar 开放原子开发者工作坊
cover

SpringBoot01:Hello,World

avatar 开放原子开发者工作坊