构建可视化基础——集成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

相关推荐