学svg的第一个坑，来自前端小白

最新推荐文章于 2024-07-31 16:50:09 发布

余之初生

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量600

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41940517/article/details/99452342

版权

实习期间接触SVG，遇到点击图形无法正确赋值的问题，经过一天排查，发现是`input`标签属性顺序导致。将`value`属性放到最后，问题解决。寻求SVG资深开发者解惑。

摘要由CSDN通过智能技术生成

是这样的，目前我是实习，然后公司会用到一点svg所以就有这个实习，话不多说，

在慕课上找到的视频，一个svg简单的编辑器，先放一下代码。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>svg编辑器</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #toolbox{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 250px;
            border-right: 1px solid #ccc;

        }
        #toolbox h2{
            margin: 0;
            /*padding: 0;*/
            background: #EEE;
            font-size: 16px;
            height: 24px;
            line-height: 24px;
            padding: 5px 10px;
        }
        #toolbox form{
            padding: 10px;

        }
        #canvas{
            position: absolute;
            top: 10px;
            bottom: 10px;
            left: 260px;
            right: 10px;
            border-shadow: 2px 2px 10px rgba(0,0,0,.4);
            border-radius: 5px;
        }
        label{
            display: inline-block;
            width: 80px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div id="toolbox">
        <h2>创建图形</h2>
        <form id="shape-creat">
            <button type="button" create="rect">Rect</button>
            <button type="button" create="circle">Circle</button>
            <button type="button" create="ellipse">Ellipse</button>
            <button type="button" create="line">Line</button>

        </form>
        <h2>图形形状</h2>
        <form id="shape-attrs">
            请先创建图形
        </form>