SVG文件

最新推荐文章于 2024-09-06 22:19:38 发布
最新推荐文章于 2024-09-06 22:19:38 发布
阅读量1.5k 收藏 3
点赞数
分类专栏： Internet of things 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huanhuanq1209/article/details/71338340
版权

Scalable Vector Graphics（可缩放矢量图形）是基于XML，用于描述二维矢量图形的图形格式。SVG由W3C制定，是一个开放标准。SVG本身允许包含3种图形对象类型：

  1. 矢量图形，包括矩形、圆、椭圆、多边形、直线、任意曲线等。
  2. 嵌入外部图像，包括png、jpeg、svg等。
  3. 文本。



1、 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

2、SVG 文件可通过以下标签嵌入 HTML 文档：<embed>（推荐在HTML5中，允许使用脚本）、<object>（支持HTML4，XHTML和HTML5标准，不允许使用脚本） 或者 <iframe>（推荐在HTML5中使用，允许使用脚本）。

     SVG的代码可以直接嵌入到HTML页面中，或您可以直接链接到SVG文件。

3、在Firefox、Internet Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代码。SVG不能直接嵌入到Opera。

4、

运行结果：

代码如下：

<!DOCTYPE html>
<html>
<body>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
</body>
</html>
第二种情况：

运行结果：


代码如下：

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="50"><!--SVG文档的大小是右下角为最后的上下边界-->
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
</body>
</html>

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。默认情况下，SVG其子元素的大小 多大，完全会显示出来。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 <circle> 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

第三种情况：

运行结果为：


代码为：

<!DOCTYPE html>
<html>
<body>

<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> 
 
</body>
</html>
其中另一种写法为：
<!DOCTYPE html>
<html>
<body>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" style="fill:rgb(255,0,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg> 
 
</body>
</html>

二、SVG中子标签

 矩形 - <rect>

1、
代码如下： 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /><!--SVG文档中某形状的大小是右下角为最后的上下边界-->

</svg>
 
</body>
</html>
其中style的另两种写法为：<rect width="300" height="100" style="fill:blue;stroke-width:1;stroke:black" />
    ：stroke="black" stroke-width="2" fill="red"
代码解析:
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色

2、
fill-opacity透明度属性的使用，其实fill-opacity是不透明性的值，即不透明的值越小，透明的值就越大。取值范围（0-1），代码如下： 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="100" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>
 
</body>
</html>

代码解析：
x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1） 
<rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5"/>
中的opacity定义了元素的透明值。 (范围: 0 到 1)。


3、 
<rect x="50" y="20" rx="50" ry="40" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
其中：
  • rx 和 ry 属性可使矩形产生圆角。

SVG 圆形 - <circle>

1、 
<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>
  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)
  • r属性定义圆的半径

SVG 椭圆 - <ellipse>

1、 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>

</body>
</html>

代码解析：

  • CX属性定义的椭圆中心的x坐标
  • CY属性定义的椭圆中心的y坐标
  • RX属性定义的水平半径
  • RY属性定义的垂直半径
运行结果为：


SVG 直线 - <line>

1、 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

</body>
</html>
运行结果为：

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

SVG 多边形 - <polygon>

1、 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

</body>
</html>
  • points 属性定义多边形每个角的 x 和 y 坐标
  • 注意：坐标值是按角的顺时针写的。
运行结果为：


使用 <polygon> 元素创建一个星型: 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
</svg>

</body>
</html>

运行结果为：



改变 fill-rule 属性为 "evenodd": 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200">
  <polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
</svg>

</body>
</html>
运行结果为：



五角星的另一种画法顺序： 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px">  
  <polygon points="100,0 160,180 10,60 190,60 40,180" style="fill:red;stroke:black;stroke-width:1;fill-rule:nonzero"/>  
</svg>


points="100,0 160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。
结果为：



先看看官方文档里面fill-rule两个属性的解释，

nonzero—这个规则通过从canvas上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到

右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。

evenodd—这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；

如果是偶数，该点在图形外部。



一看两幅图，你可能会有两个疑问，这些线段的箭头是什么？两组图形的第三幅图为什么是一样的？其实这些线段的方向是由我们给出的坐标的顺序决定的，points="100,0

 160,180 10,60 190,60 40,180"，起始点是最上方的点，然后是右下，最左边，最右边，再到左下。把这些点按顺序连起来就变成了五角星。

先在图上随机取几个点，蓝色射线的起始点就是随机的点，射线1,2,3,4穿过的图形线段数分别是1,2,3,4，如图


先看nozero时，怎么判断点是否在内部区域。射线1和图形线段只有一个交点，为从左到右，所以结果是1，判定为内部区域；射线2有两个交点，都是从左到右，结果是2，内

部区域；射线3有三个交点，两个从左到右，一个从右到左，结果是1，内部区域；射线4有四个交点，两个从左到右，两个从右到左，结果是0，所以是外部区域。

evenodd时，只判断交点个数，所以1,3都是内部区域，2，4都是外部区域。


结果就很清楚啦，那两组图的第三个图为什么是一样的，也一目了然啦，在圆环内的点，与图形线段的交点有两个，一左进右出，一右进左出，所以两种判定方式下都是外部区

域。

SVG 曲线 - <polyline>

1、 <polyline> 元素是用于创建任何只有直线的形状： 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

运行结果：



曲线style中fill是干嘛使得： 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:blue;stroke:red;stroke-width:4" />
</svg>

</body>
</html>
运行结果如下： 



<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:blue;stroke:black;stroke-width:3" />
</svg>

</body>
</html>

运行结果为：



SVG 路径 - <path>

1、

<path> 元素用于定义一个路径。

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

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。


<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L50 200 L225 200 Z" />
</svg>

</body>
</html>
结果为：



修改： 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300">
  <path d="M150 0 L75 200 L225 200 Z" style="fill:blue; stroke:red; stroke-width:5 "/>
</svg>

</body>
</html>

将画笔移动到指定坐标位置 -> 画一条直线到指定坐标位置 -> 再画一条曲线 -> 完成后抬起画笔结束
结果为：

疑问：
1、 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L225 100 L75 200 Z" />
</svg>

</body>
</html>
结果为：


2、没看懂代码 
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400" width="450">
<path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none" text-anchor="middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>

</body>
</html>

运行结果为：


3、xmlns和xlink两者命名空间的理解是什么？ 
<!DOCTYPE html>
<html>
<body>


<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="https://www.baidu.com/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG</text>
  </a>
</svg>
 
</body>
</html>
运行结果：文字I love SVG是连接到了百度网页

属性的小总结：
fill---------------------------是定义的填充色， 支持“none”、“current-color”值或颜色。 不支持梯度。
stroke----------------定义如何绘制元素。支持“none”、“current-color”值或颜色。不支持阵列和梯度。
text-------------------文本颜色是笔画颜色定义的颜色，如果没有明确定义笔画颜色，则使用填充颜色。（<textx="0"y="15"fill="red">在平坦的路上曲折前行</text>x="0" y="15" 是文字定位坐标；）


0914_h
关注
专栏目录
svg文件简介
05-14
SVG，可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。
详解SVG文件
m0_61629312的博客
12-12 1026
SVG 是可缩放矢量图形（Scalable Vector Graphics）的缩写，是一种用于描述二维矢量图形的 XML 格式标记语言。与传统的位图图形（如JPEG、PNG等）不同，SVG 是基于 XML 格式的矢量图形，它描述图形的方式是基于数学公式的，因此可以无限放大而不失真。SVG 图形可以被放大或缩小到任意大小而不失真，因为它是基于矢量的描述。SVG 文件是基于文本的，可以使用文本编辑器进行编辑和手动调整。SVG 支持各种图形元素，如直线、矩形、圆形、路径等，使其非常灵活。
2D板材排版套料开源代码
最新发布
gitblog_09712的博客
09-06 322
2D板材排版套料开源代码 SVGnest.rar项目地址:https://gitcode.com/open-source-toolkit/2b04d 项目简介 本项目提供了一个用于2D板材排版套料的开源代码实现。该代码使用遗传算法来优化板材的排版，通过不断迭代和优化，最终得出一个利用率最高的排版结果。由于代码是开源的，您可以深入了解算法的实现细节，为您的排版需求提供有力的参考。 功能特点 遗传...
SVG 图像入门教程
weixin_33958585的博客
08-14 495
http://www.ruanyifeng.com/blog/2018/08/svg.html 一、概述 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 SVG 文件可以直接插入网页，成为 DOM 的...
svg 文档
starwmx520的博客
01-08 1185
SVG文档的元素基本可以分为以下几类： 动画元素：animate, animateColor, animateMotion, animateTransform, set； 解释元素：desc, metadata, title； 图形元素：circle, ellipse, line, path, polygon, polyline, rect； 结构元素：defs, g, svg, symb
loading.svg
08-08
一个svg动画文档，网页加载的进度条。
将阿里iconfont下载后包含多个svg图标的文件转换为单个svg文件
05-23
本文将详细介绍如何通过JavaScript工具包将阿里Iconfont下载的多个SVG图标文件转换为一个单独的SVG文件。 首先，了解SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，它允许无限缩放而不会损失质量，...
vue项目里面引用svg文件并给svg里面的元素赋值
10-14
在Vue项目中引用SVG文件并给SVG内部元素赋值是一个常见的需求，特别是在处理复杂的SVG图形时。本篇文章将详细介绍如何实现这一目标。 首先，我们需要理解SVG（Scalable Vector Graphics）是一种基于XML的矢量图像...
vue动态加载SVG文件并修改节点数据的操作代码
10-14
在本文中，我们将探讨如何在Vue项目中动态加载SVG文件并修改其内部的节点数据。SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许我们创建可缩放的图形，这对需要交互性和动态变化的场景尤其有用...
svg2pdf:从一系列 SVG 文件创建分层 PDF 文件
05-29
svg2pdf 将一系列 SVG 文件转换为分层的 PDF 文件，每个 SVG 文件放在单独的层中。 文件名成为层名。 此应用程序旨在仅转换由一个特定应用程序创建的 SVG 文件，因此库不支持所有 SVG 样式。 用法： svg2pdf....
svglib:生成一个js模块文件，以从文件夹中导入所有svg文件
03-27
在大型项目中，可能有多个SVG图标被用于不同的页面或功能，管理这些SVG文件可能会变得复杂。为了解决这个问题，`svglib` 工具应运而生。`svglib` 允许开发者通过生成一个JavaScript模块文件，将整个文件夹中的SVG...
世界地图svg文件
03-13
世界地图svg文件
SVG格式文件
weixin_30587927的博客
04-25 856
SVG可以算是目前最最火热的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像...
html中嵌入SVG文件
leixu1027的博客
09-12 916
SVG in HTML svg{ display: block; width: 500px; height: 500px; margin: auto; border: thick double navy; background:
SVG文件与DOM
liangkaiming的专栏
07-29 6399
<br />SVG：可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。 SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。<br /> <br />SVG的特点<br />1．基于XML<br />　　为了保证网络图像能够顺利地和目前已经由W3C开发的D0M1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，
html中svg是什么文件,svg是什么文件格式？如何打开svg文件？
weixin_39805906的博客
06-20 1495
svg是一种开放标准的矢量图形语言，是可缩放的矢量图形格式。svg格式的图像可任意放大图形显示，而且边缘异常清晰，生成的文件很小，方便传输，文字在svg图像中保留可编辑和可搜寻的状态，没有字体的限制，所以十分适合用于设计高分辨率的Web图形页面。svg是什么文件？svg是目前十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言，使用svg格式我们可以直接用代码来描绘图像，可以用...
SVG格式文件可以用什么软件打开?
FourxiYuanzi的博客
04-17 5642
SVG是一种基于矢量的图像文件格式，通过基于网格上的点和线的数学公式存储图像，与 JPEG 等基于像素的位图文件不同。这种文件类型可以在不损失任何质量的情况下生成很小的文件，因而加载速度也相对更快，也使其成为LOGO和复杂在线图形的理想格式选择。支持打开SVG格式文件和其他主流设计格式的导入导出。在即时设计SVG 文件导入后，仍然保持可编辑性。选中 SVG 文件中单个图层，即可进行二次编辑修改。SVG格式文件在设计相关工作中经常使用，用于显示网站或应用程序的按钮、公司LOGO、动态生成图形等。
SVG文本
Meskjei的博客
07-02 769
文章目录字符、字形和字体EM框text元素文本的位置x="0" y="0"x="x1 x2 x4 x5... xn" y="x1 y2 y4 y5... yn"文本的偏移dx="dx" dy="dy"dx="x1 x2 x3...xn" dy="y1 y2 y3 y4...yn"文本的旋转rotate="deg"rotate="deg1 deg2 deg3...degn"文本的长度textLeng...
SVG 是什么？
weixin_30760895的博客
07-18 176
SVG 意为可缩放矢量图形(ScalableVectors Graphics)。 SVG 图形在放大或者改变尺寸的情况下，其图形的质量不会有所损失。 SVG 使用 XML 格式定义图形。 SVG 文件是纯粹的 XML。 SVG 是万维网联盟的标准。 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。 ————————————...
使用Batik解析和操作SVG文件
在Java中解析SVG文件通常涉及到使用Apache Batik工具集。Batik为SVG的支持提供了丰富的功能，包括解析SVG文档、将其转换为其他图形格式，以及在Java Swing应用中展示SVG图像。JSVGCanvas是 Batik 提供的一个关键组件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值