无废话，基础的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、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

openEuler系累计装机量突破1000万，树立操作系统产业新里程碑

11月15日，以“以智能，致世界”为主题的操作系统大会2024在北京中关村国际创新中心召开。

avatar 开放原子开发者工作坊

多模态大模型&科学计算双管齐下，百度飞桨两大赛项报名倒计时！

第二届开放原子大赛是由开放原子开源基金会组织举办的开源技术领域专业赛事，聚焦解决真问题，重点覆盖基础软件、工业软件、人工智能大模型等领域

avatar 开放原子开发者工作坊

以智能 致世界 | 操作系统大会2024议程全览

avatar 开放原子开发者工作坊