可视化-svg

我会带着你远行 2022-12-25 08:57 239阅读 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 ##

#### 源码 ####

<div class="flex">
       <div>
           <h2>svg-矩形</h2>
           <div class="box">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="70">
                   <rect width="100%" height="50" style="fill:rgb(0,0,255); stroke-width:2; stroke:rgb(0,0,0)" />
               </svg> 
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
                   <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" />
               </svg>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="80">
                   <rect x="20" y="20" rx="20" ry="20" width="250" height="50" style="fill:red;stroke:black;stroke-width:5;opacity:0.8" />
               </svg>
           </div>
       </div>
       <div>
           <h2>svg-圆</h2>
           <div class="box">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
               </svg> 
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                   <circle cx="100" cy="50" r="40" style="fill: green; stroke: yellow; stroke-width: 5; opacity: 0.6;" />
               </svg> 
           </div>
       </div>
       <div>
           <h2>svg-椭圆</h2>
           <div class="box">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100">
                   <ellipse cx="150" cy="60" rx="100" ry="40" style="fill:yellow;stroke:purple;stroke-width:2"/>
               </svg>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="150">
                   <ellipse cx="150" cy="100" rx="100" ry="30" style="fill:purple" />
                   <ellipse cx="150" cy="70" rx="100" ry="20" style="fill:lime" />
                   <ellipse cx="150" cy="45" rx="100" ry="15" style="fill:yellow" />
               </svg>
           </div>
       </div>
    </div>

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

## 案例2 ##

#### 源码 ####

<div class="flex">
      <div>
           <h2>svg-直线</h2>
           <div class="box">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                   <line x1="10" y1="0" x2="10" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
                   <line x1="50" y1="0" x2="50" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
                   <line x1="100" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
                   <line x1="150" y1="0" x2="300" y2="0" style="stroke:rgb(255,0,0);stroke-width:4" />
               </svg>
           </div>
       </div>
       <div>
           <h2>svg-多边形</h2>
           <div class="box">
               <svg height="210" width="160">
                   <polygon points="0,10 10,190 160,210" style="fill:lime;stroke:purple;stroke-width:2"/>
               </svg>
               <svg height="210" width="200">
                   <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;" />
               </svg>
           </div>
       </div>
       <div>
           <h2>svg-曲线</h2>
           <div class="box">
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160">
                   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:white;stroke:red;stroke-width:4" />
               </svg>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="180">
                   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
               </svg>
           </div>
       </div>
    </div>

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221120/badbab274b9c4ac4ba506140d159ea23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201201135805895.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw==,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

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

相关阅读

相关 Redis可视化

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

亦凉/ 2023年09月25日 11:03/ 0 赞/ 65 阅读

相关服务器可视化_可视化集中管理服务器节点进程

![c039bc64f88840b1a1ab68d9dcc30c33.png][] > 阅读本文大约需要1.5分钟。背景在之前的文章《自动化测试之进程管理》中讲到了用

灰太狼/ 2023年01月07日 02:29/ 0 赞/ 196 阅读

相关可视化-svg

svg特点 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XM

我会带着你远行/ 2022年12月25日 08:57/ 0 赞/ 239 阅读

相关 OpenCASCADE：可视化简介

OpenCASCADE：可视化简介 Open CASCADE 技术中的可视化基于以下分离：一方面 – 存储要显示和选择的实体的几何形状和拓扑结构的数据，以及

╰+攻爆jí腚メ/ 2022年09月03日 04:21/ 0 赞/ 351 阅读

相关网络可视化

[caffe中如何可视化cnn各层的输出][caffe_cnn] [faster rcnn修改demo.py保存网络中

「爱情、让人受尽委屈。」/ 2022年07月13日 05:28/ 0 赞/ 431 阅读

相关【python可视化系列】python数据可视化利器--pyecharts

【python可视化系列】python数据可视化利器--pyecharts [echarts官网][echarts] 一、前言 [echarts][echarts 1]是

谁践踏了优雅/ 2022年05月22日 06:06/ 0 赞/ 570 阅读

相关 attention map注意力可视化 feature map可视化

prepare 1.加载模型，利用get\_layer 来获取某一层的参数（为了attention map）将attention map，当做二值图片？resiz

￡神魔★判官ぃ/ 2022年05月11日 06:56/ 0 赞/ 1644 阅读

相关 mongo 可视化

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

旧城等待，/ 2022年03月29日 16:20/ 0 赞/ 304 阅读

相关 python可视化

1. matplotlib画图 import numpy as np import matplotlib.pyplot as plt x=np.ara

ゝ一世哀愁。/ 2021年11月04日 13:38/ 0 赞/ 543 阅读

相关 ECharts数据可视化——可视化适配方案

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年07月25日 11:07/ 0 赞/ 735 阅读