无废话，基础的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
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊