【数据可视化从入门到精通】svg入门入门②

最新推荐文章于 2024-05-23 10:00:51 发布

不停喝水

最新推荐文章于 2024-05-23 10:00:51 发布

阅读量123

点赞数 1

分类专栏： # 【数据可视化】文章标签：可视化 svg 数据可视化 d3.js html5

本文链接：https://blog.csdn.net/weixin_48200589/article/details/119056402

版权

【数据可视化】专栏收录该内容

10 篇文章 6 订阅

订阅专栏

svg

SVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形

入门案例：绘制点、矩形、直线和圆形

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <svg width="800" height="800">
      <rect
        width="50"
        height="50"
        style="fill:red;stroke-width:0;stroke:rgb(0,0,0);"
      />
      <line 
        x1="100" 
        y1="100" 
        x2="250" 
        y2="75"
        style="stroke:blue;stroke-width:1"
      />
      <line 
        x1="250" 
        y1="75" 
        x2="300" 
        y2="100"
        style="stroke:blue;stroke-width:1"
      />
      <circle 
        cx="200" 
        cy="200" 
        r="50" 
        stroke="green"
        stroke-width="2" 
        fill="red"
      />
      <line 
        x1="300" 
        y1="300" 
        x2="301" 
        y2="301"
        style="stroke:red;stroke-width:1"
      />
    </svg>
  </body>
</html>

思考：你能否总结出 svg 绘图的流程？

编写 svg 标签，指定宽高
编写 svg 绘图标签
编写绘图属性和样式

svg 参考手册

不停喝水

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【数据可视化从入门到精通】svg入门入门②

svgSVG是一种基于 XML 的图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形入门案例：绘制点、矩形、直线和圆形<!DOCTYPE html><html> <head> </head> <body> <svg width="800" height="800"> <rect width="50" heig
复制链接

扫一扫