【暑期实训】2021-6-28 SVG学习记录

最新推荐文章于 2023-01-04 23:49:37 发布
最新推荐文章于 2023-01-04 23:49:37 发布
阅读量263 收藏
点赞数
分类专栏： 暑期实训 文章标签： svg 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44179269/article/details/118368188
版权

文章目录

今日工作

  1. 组织大家进行分工
  2. 创建gitee组织，创建前端后端三个仓库，邀请大家进入
  3. 了解知识图谱可视化相关技术有哪些
  4. 开始学习SVG

SVG学习记录

一、SVG概述

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形 SVG 使用XML 格式定义图形
  • SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
    SVG 与诸如 DOM 和XSL 之类的 W3C 标准是一个整体

今天，所有浏览器均支持 SVG 文件，不过需要安装插件的 Internet Explorer 除外。插件是免费的，比如 Adobe SVG Viewer。

SVG 的主要竞争者是 Flash。与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

SVG文件例子

SVG 文件必须使用 .svg 后缀来保存

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>

第一行包含了 XML 声明。请注意 standalone属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。standalone="no"意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg> 。这是根元素。width和 height属性可设置此 SVG 文档的宽度和高度。version属性可定义所使用的 SVG 版本，xmlns属性可定义 SVG 命名空间。

HTML中嵌入SVG

SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object>或者<iframe>。

1.embed

<embed>标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer推荐的方法。然而，如果需要创建合法的 XHTML，就不能使用<embed>。任何 HTML 规范中都没有<embed>标签。

语法：

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

注释：pluginspage 属性指向下载插件的 URL。

2.object

<object>标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object>标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

注释：codebase属性指向下载插件的 URL。

3.iframe

<iframe>标签可工作在大部分的浏览器中。

语法：

<iframe src="rect.svg" width="300" height="100">
</iframe>

二、SVG形状

1、矩形<rect>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>

</svg>
  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0px）
  • rx 和 ry 属性可使矩形产生圆角
  • style 属性用来定义 CSS 属性
  • CSS 的 fill属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的stroke-width 属性定义矩形边框的宽度
  • CSS 的stroke 属性定义矩形边框的颜色
  • CSS 的fill-opacity属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
  • CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
2、圆<circle>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>

</svg>
  • cx 和cy属性定义圆心的 x 和 y 坐标。如果省略cx和 cy，圆的中心会被设置为 (0, 0)
  • r属性定义圆的半径。
3、椭圆<ellipse>

椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<ellipse cx="300" cy="150" rx="200" ry="80"
style="fill:rgb(200,100,50);
stroke:rgb(0,0,100);stroke-width:2"/>

</svg>
  • cx属性定义圆心的 x 坐标
  • cy属性定义圆心的 y 坐标
  • rx属性定义水平半径
  • ry属性定义垂直半径
4、线条<line>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/>

</svg>
  1. x1 属性在 x 轴定义线条的开始
  2. y1 属性在 y 轴定义线条的开始
  3. x2 属性在 x 轴定义线条的结束
  4. y2 属性在 y轴定义线条的结束
5、多边形<polygon>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>

</svg>

points属性定义多边形每个角的 x 和 y 坐标

6、折线<polyline>

<polyline> 标签用来创建仅包含直线的形状。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>
7、路径<path>

下面的命令可用于路径数据：

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C =curveto
  • S = smooth curveto
  • Q = quadratic Belzier curve
  • T = smooth quadratic Belzier curveto
  • A = elliptical Arc
  • Z = closepath
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

定义了一条路径，它开始于位置 250 150，到达位置 150 350，然后从那里开始到 350 350，最后在 250 150 关闭路径。

三、SVG滤镜

<filter>标签用来定义 SVG 滤镜。
<filter>标签必须嵌套在<defs>标签内。
<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

可以在每个 SVG 元素上使用多个滤镜

在 SVG 中，可用的滤镜有：

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

高斯模糊

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>

</svg>
  • <filter>标签的id属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用#字符
  • 滤镜效果是通过<feGaussianBlur>标签进行定义的。
  • fe前缀可用于所有的滤镜
  • <feGaussianBlur>标签的stdDeviation属性可定义模糊的程度
  • in="SourceGraphic"这个部分定义了由整个图像创建效果

四、SVG 渐变

渐变是一种从一种颜色到另一种颜色的平滑过渡。另外，可以把多个颜色的过渡应用到同一个元素上。

在 SVG 中，有两种主要的渐变类型：

  • 线性渐变
  • 放射性渐变
线性渐变

<linearGradient>可用来定义 SVG 的线性渐变。

<linearGradient>标签必须嵌套在<defs>的内部。

线性渐变可被定义为水平、垂直或角形的渐变：

  • 当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
  • 当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
  • 当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>

<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>

</svg>
  • <linearGradient>标签的 id属性可为渐变定义一个唯一的名称
  • fill:url(#orange_red)属性把ellipse元素链接到此渐变
  • <linearGradient>标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset属性用来定义渐变的开始和结束位置。
放射性渐变

<radialGradient>用来定义放射性渐变。

<radialGradient>标签必须嵌套在<defs>中。

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>

<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>

</svg>
  • <radialGradient>标签的 id 属性可为渐变定义一个唯一的名称
  • fill:url(#grey_blue) 属性把ellipse元素链接到此渐变
  • cx、cy 和 r 属性定义外圈，而fx 和fy定义内圈
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个<stop>标签来规定。offset 属性用来定义渐变的开始和结束位置。
虾泥泥泥泥
关注
专栏目录
FPGA知识图谱-SVG格式
03-11
请各位大哥先到 https://blog.csdn.net/Pieces_thinking/article/details/88387874 看一下再下载
SVG学习笔录（一）
qq_27009517的博客
05-10 604
SVG可缩放矢量图形（Scalable Vector Graphics）这项技术，现在越来越让大家熟知，在h5的移动端应用使用也越来越广泛了， 下面让我分享给大家svg学习的经验。 　　HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。 一、什么是svg？ 　　Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形
svg学习笔记
S_B_Girl的博客
12-28 471
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="b
SVG基础二：SVG编写
林谿的博客
12-22 1226
SVG 使用 XML 编写。 SVG 实例 下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存： <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" h
SVG基本用法
qq_40858865的博客
09-26 425
SVG svg是一种语言，这种语言用来描述二维图形和绘图使用。svg是存粹的XML。（什么是XML） 一个简单的 SVG 文件的例子 &lt;?xml version="1.0" standalone="no"?&gt; //对xml声明，standalone该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 //standalone="no" 意味着 SVG 文档会引用一个外部...
babel-plugin-inline-svg：Babel插件以优化和内嵌svg
01-31
path d="M37.6 24.104l-4.145-4.186v-6.389h-3.93v2.416L26.05 12.43a1.456 1.456 0 0 0-2.07 0L12.43 24.104a1.488 1.488 0 0 0 0 2.092c.284.288.658.431 1.031.431h1.733V38h6.517v-8.475h6.608V38h6.517V26.627h...
save-ps-to-svg 1.0.zip
06-12
《Photoshop到SVG转换脚本详解——save-ps-to-svg 1.0》 在数字艺术与设计领域，Photoshop（简称PS）是一款广泛使用的图像处理软件，而SVG（Scalable Vector Graphics）则是一种基于XML的矢量图形格式，尤其适用于...
save-ps-to-svg1.0.rar
03-10
标题中的"save-ps-to-svg1.0.rar"表明这是一个压缩包文件，版本为1.0，根据描述推测可能包含一个用于将Photoshop（PS）文件转换为Scalable Vector Graphics（SVG）格式的脚本。SVG是一种矢量图形格式，与像素图（如...
save-ps-to-svg1.0.jsx.zip
10-08
标题“save-ps-to-svg1.0.jsx.zip”表明这是一个压缩包文件，其中包含一个名为“save-ps-to-svg1.0.jsx”的脚本。这个脚本主要用于将Adobe Photoshop（PS）中的设计元素，尤其是形状，导出为可缩放矢量图形（SVG）...
save-ps-to-svg1.0.jsx转换工具.zip
06-17
《Photoshop到SVG转换利器——save-ps-to-svg1.0.jsx脚本详解》 在数字艺术和设计领域，Photoshop（PS）与Scalable Vector Graphics（SVG）两种格式各有千秋。PS以其强大的图像编辑功能深受设计师喜爱，而SVG则因其...
HTML中嵌入SVG图片的N种方式
weixin_33810006的博客
08-31 7722
最近用到了个SVG图片，里面还是带<image>标签的，想要把它嵌入到HTML中还是有些工作要做的。 经历 最初的图片是这样写的： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "htt...
8. SVG
weixin_52986865的博客
01-31 150
SVG 在前面，我们已经向大家介绍了如何使用 HTML 5 中的 Canvas 元素来进行图形的绘制。 实际上，在 Canvas 诞生之前，有很长一段时间都是使用 SVG 来绘制图形的。所以在本小节中，我们将为大家简单介绍一下如何使用 SVG 来绘制图形。 SVG 简介 SVG 意为可缩放矢量图形。它是使用 XML 格式来定义的图像。通过 SVG 画出来的图形为矢量图，所以 SVG 图像在放大或者改变尺寸的情况下图形的质量不会有所损失。 SVG的历史和优势 在 2003 年 1 月 14 日，SVG 1.1
SVG 标签
guoqkmiss的博客
09-27 5640
一、rect 矩形 属性 rect 元素的 width 和 height 属性可定义矩形的高度和宽度 style 属性用来定义 CSS 属性 CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值） CSS 的 stroke-width 属性定义矩形边框的宽度 CSS 的 stroke 属性定义矩形边框的颜色 x 属性定义矩形的左侧位置（例如，x=“0” 定义矩形到浏览器窗口左侧的距离是 0px） y 属性定义矩形的顶端位置（例如，y=“0” 定义矩形到浏览器窗口顶端的距离是 0p
用js动态创建svg
武林半侠的博客
12-31 4206
要实现的效果 svg文件的写法： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="300px"&gt
svg基本知识
ab31ab的博客
11-19 542
写这篇文章的缘由是因为做dashboard的项目，图形是svg的项目,参考的项目使用div写的，然后为了改样式一直在套样式，结果套不出来，也是醉了，整理了一下svg的基本格式，从w3c上整理的，详细的列子参考https://www.w3school.com.cn/svg/svg_rect.asp 目录 svg形状 矩形 圆形 椭圆 线 多边形 折线 标签 SVG ...
SVG 详解（二）基本概念
青岑的博客
04-02 4280
SVG 实例 // 一个 SVG 文件 &lt;?xml version="1.0" standalone="no"?&gt; &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt; &lt;svg width="1
可视化系列讲解：SVG创建及使用方式
最新发布
wangyuiba1314的博客
01-04 2690
前端可视化系列讲解：css3D，svg，canvas等
svg 读取SVG文件并绘制矩形框选择图元
且听风吟的博客
12-31 2056
首先是SVG文件，里面包含了几个不同的图元： <?xml version='1.0' standalone='no'?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd"> <svg width=...
SVG：知识点整理（语法+知识点参考+svg元素表）
喜狼狼与灰太杨的博客
08-26 1177
概念 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。 基本xml代码： <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="10
Vue-cli3配置svg-sprite-loader实现SVG图标管理
"Vue CLI 3 整合 svg-sprite-loader 的使用教程" 在 Vue CLI 3 中，为了实现 SVG 图标的优化管理，我们可以利用 `svg-sprite-loader` 插件。这个插件能将 SVG 文件转换成 `symbol` 标签，并自动插入到 HTML 文档中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值