使用Svg绘制图形

爱学习的小欣欣

于 2022-05-08 14:58:37 发布

阅读量992

点赞数

分类专栏：前端案例学习文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_47227886/article/details/124648311

版权

前端案例学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

svg绘制的图形是矢量图形，放大依旧不会模糊，；

与css相似；

canvas绘制图形是通过控制dom。


<body>
  <svg width="800" height="800">
    <!-- 1. 绘制矩形 -->
    <rect width='50' height='50' style="fill:red;" />

    <!-- 2. 绘制线段 -->
    <line x1="100" y1="100" x2="250" y2="75" style="stroke: blue;stroke-width:1;" />

    <!-- 3. 绘制圆形 -->
    <circle cx="200" cy="200" r="50" stroke="green" stroke-width=2 fill="red" />


  </svg>

</body>

爱学习的小欣欣

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Svg绘制图形

svg绘制的图形是矢量图形，放大依旧不会模糊，；与css相似；canvas绘制图形是通过控制dom。<body> <svg width="800" height="800">  <rect width='50' height='50' style="fill:red;" />  <line x1="100" y1="100"
复制链接

扫一扫

专栏目录