可视化-svg

我会带着你远行 2022-12-25 08:57 389阅读 0赞

svg特点

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
  • SVG 可被非常多的工具读取和修改(比如记事本)
  • SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
  • SVG 可以与 Java 技术一起运行
  • SVG 是开放的标准
  • SVG 文件是纯粹的 XML

案例1

源码

  1. <div class="flex">
  2. <div>
  3. <h2>svg-矩形</h2>
  4. <div class="box">
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="70">
  6. <rect width="100%" height="50" style="fill:rgb(0,0,255); stroke-width:2; stroke:rgb(0,0,0)" />
  7. </svg>
  8. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
  9. <rect x="120" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9;opacity:0.9" />
  10. </svg>
  11. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
  12. <rect x="20" y="20" rx="20" ry="20" width="250" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.8" />
  13. </svg>
  14. </div>
  15. </div>
  16. <div>
  17. <h2>svg-圆</h2>
  18. <div class="box">
  19. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  20. <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
  21. </svg>
  22. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  23. <circle cx="100" cy="50" r="40" style="fill: green; stroke: yellow; stroke-width: 5; opacity: 0.6;" />
  24. </svg>
  25. </div>
  26. </div>
  27. <div>
  28. <h2>svg-椭圆</h2>
  29. <div class="box">
  30. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
  31. <ellipse cx="150" cy="60" rx="100" ry="40" style="fill:yellow;stroke:purple;stroke-width:2"/>
  32. </svg>
  33. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="150">
  34. <ellipse cx="150" cy="100" rx="100" ry="30" style="fill:purple" />
  35. <ellipse cx="150" cy="70" rx="100" ry="20" style="fill:lime" />
  36. <ellipse cx="150" cy="45" rx="100" ry="15" style="fill:yellow" />
  37. </svg>
  38. </div>
  39. </div>
  40. </div>

效果图

在这里插入图片描述

案例2

源码

  1. <div class="flex">
  2. <div>
  3. <h2>svg-直线</h2>
  4. <div class="box">
  5. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  6. <line x1="10" y1="0" x2="10" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  7. <line x1="50" y1="0" x2="50" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  8. <line x1="100" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  9. <line x1="150" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:4" />
  10. </svg>
  11. </div>
  12. </div>
  13. <div>
  14. <h2>svg-多边形</h2>
  15. <div class="box">
  16. <svg height="210" width="160">
  17. <polygon points="0,10 10,190 160,210" style="fill:lime;stroke:purple;stroke-width:2"/>
  18. </svg>
  19. <svg height="210" width="200">
  20. <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;" />
  21. </svg>
  22. </div>
  23. </div>
  24. <div>
  25. <h2>svg-曲线</h2>
  26. <div class="box">
  27. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160">
  28. <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
  29. </svg>
  30. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180">
  31. <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
  32. </svg>
  33. </div>
  34. </div>
  35. </div>

效果图

在这里插入图片描述

发表评论

表情:
评论列表 (有 0 条评论,389人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Redis

    Redis可视化工具是哪个 在Protege中应该是不能编辑OWL代码的,只能由所创建的概念模型生成或导出OWL、RDF代码。如果想直接编辑OWL代码,可以使用其他的编辑

    相关 mongo

    最近想自己搭建一个个人博客,所以学了下mongodb,mongodb是用命令行输入的,有些人可能不太习惯,我自己找了下mongodb的一些可视化工具,发现了一款adminmon