1、画线
<style>
.line1{
stroke: black;
stroke-width: 3px;
}
.line2{
stroke: red;
stroke-width: 5px;
}
</style>
</head>
<body>
<!-- svg:矢量图,放大不会失真,适合大面积的贴图,通常动画较少或者较简单 标签和css去画
Canvas:适合小面积的绘图,适合动画
-->
<svg width="500px" height="300px" style="border: 1px solid">
<line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
<line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
</svg>
</body>
2、画矩形
<style>
.line1{
stroke: black;
stroke-width: 3px;
}
.line2{
stroke: red;
stroke-width: 5px;
}
</style>
</head>
<body>
<svg width="500px" height="300px" style="border: 1px solid">
<line x1="100" y1="100" x2="200" y2="100" class="line1"></line>
<line x1="200" y1="100" x2="200" y2="200" class="line2"></line>
<rect height="50" width="100" x="0" y="0" rx="10" ry="20"></rect><!-- 所有闭合的图形,在svg中默认都是天生充满并且画出来 --><!-- rx,ry:做圆角 -->
</svg>
</body>