构建可视化基础——集成SVG

Posted yankyblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了构建可视化基础——集成SVG相关的知识,希望对你有一定的参考价值。

此文档解决以下问题:

一、SVG的简单使用

二、SVG 实例

三、SVG 参考手册


 

  SVG是可缩放向量图的缩写,它是HTML5画布一个有用的替代技术。通过SVG,可以采用一种大多数现代浏览器都支持的格式创建运行图形。与基于像素的画布不同,SVG是基本向量的。向量是独立于分辨率的,这意味着在重新调整或放大是它们的质量不会减低,而且与栅格化的图形相比,通常它们生成的文件更小。

1.当文件已经被导出为SVG时,可以用基本的<img>标记集成到Web页面

 

<img src="images/cartLogo.svg" width="400" height="150"/>

 

 

 

2.也可以使用XML文件创建SVG,或者在HTML页面中内嵌SVG。该代码要求使用一个XML命名空间以及特定的语法。这里不需要用JavaScript以编程方式创建图形。

 

            <svg height="200" xmlns="http://www.w3.org/2000/svg">
                <circle id="circle1" cx="100" cy="100" r="50" fill="blue" />
            </svg>

 

 

 

3.完整代码

 

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>SVG Example</title>
        <style>
            #outerWrapper 
                width: 800px;
                margin: 1em auto;
            
            
            svg 
                border: 1px solid #000;
            
        </style>
    </head>

    <body>
        <div id="outerWrapper">
            <svg height="200" xmlns="http://www.w3.org/2000/svg">
            <!--<circle>标记中,    cx代表中心x坐标,cy代表中心y坐标,r代表半径,fill代表填充颜色-->
                <circle id="circle1" cx="100" cy="100" r="50" fill="blue" />
            </svg>
        </div>
    </body>

</html>

 

4.运行结果

技术图片

注意:

处理提供与画布一样的核心绘图能力,例如矩形、椭圆、线、多边形、文本和渐变等,SVG还包含很多过滤器,用于提供特殊效果。一些可用的SVG特效包括:

  • 混合
  • 偏移
  • 高斯模糊
  • 彩色矩阵
  • 组合
  • 卷积矩阵
  • 漫射照明
  • 镜面光
  • 平铺
  • 烟雾

 结合使用SVG过滤器。通过结合混合、偏移和高斯模糊过滤器,为前面的圆形添加阴影。

 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SVG Example - Filters</title>
<style>
    #outerWrapper 
        width: 800px;    
        margin: 1em auto;
    
    svg 
        border: 1px solid #000;    
    
</style>
</head>

<body>
<div id="outerWrapper">
<svg height="400" xmlns="http://www.w3.org/2000/svg">
    <!--<defs> 和 <filter>的使用https://www.runoob.com/svg/svg-fegaussianblur.html
        feOffset - 过滤阴影
        feColorMatrix - 用于彩色滤光片转换
        feGaussianBlur> - 用于创建模糊效果
        feBlend - 与图像相结合的滤镜
    -->
  <defs>
    <filter id="filterDropShadow" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
<circle id="circle1" cx="100" cy="100" r="50" fill="blue" filter="url(#filterDropShadow)" />
</svg>
</div>
</body>
</html>

 

 

 

运行结果:

技术图片

 

以上是关于构建可视化基础——集成SVG的主要内容,如果未能解决你的问题,请参考以下文章

图形基础篇03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?

图形基础篇03 # 声明式图形系统:如何用SVG图形元素绘制可视化图表?

梯度提升算法决策过程的逐步可视化

JVS系列开源框架——可视化在线表单配置含框架源码

集成学习模型(xgboostlightgbmcatboost)进行回归预测构建实战:异常数据处理缺失值处理数据重采样resample独热编码预测特征检查特征可视化预测结构可视化模型

如何学习可视化?