当前位置：首页 > 编程资源 > 编程问答 >内容正文

编程问答

SVG入门理解

发布时间：2025/3/8 编程问答 33 豆豆

生活随笔收集整理的这篇文章主要介绍了 SVG入门理解小编觉得挺不错的,现在分享给大家,帮大家做个参考.

SVG入门
- SVG 元素
- 简单的形状
  - rect
  - circle
  - ellipse
  - line
  - text
  - path
- SVG 样式
- 分层和绘图顺序
- 透明度

SVG入门

当我们用SVG生成和操作一些炫酷的效果时,D3是最佳选择。使用div和其他原生HTML元素绘图也是可以的，但是太笨重，而且会受到不同浏览器的限制，传达出的视觉效果会有不一致的影响。使用SVG更可靠，视觉上更一致，最重要的就是方便，快捷。

像Illustrator这样的矢量绘图软件可用于生成SVG文件，但我们更需要学习如何使用代码生成它们。

SVG 元素

可缩放矢量图形是基于文本的图像格式。每一个SVG图像都是使用类似HTML的标识代码定义生成的。SVG代码可以直接包含在任何HTML文档中。除了IE 8及更早的版本外，其他每一个Web浏览器都支持SVG。

SVG是基于XML的，因此你会注意到没有结束标记的元素必须是自动关闭的，例如：

在绘制任何SVG图像之前，必须创建一个SVG元素。将SVG元素视为渲染视觉效果的画布。其实这方面，SVG在概念上有点类似于HTML中的canvas元素。SVG是可以指定宽度和高度的，如果不指定那么SVG将在其封闭元素中占用尽可能多的空间大小。

下面是一个指定空间大小的SVG：

如果你将这段代码放在你的HTML中，会形成一块空白区域，此时你可以鼠标右键选择空白区域，选择检查，将会发现：

会看一个SVG元素，它占用了500个水平像素和50个垂直像素。但是看起来不像，下面解释。

浏览器将像素视为默认度量单位。我们指定的尺寸是500和50，而不是500px和50px。我们可以明确指定px,或者是任意数量的其他被支持的单位，比如：em，pt，in，cm，mm。

简单的形状

SVG标记之间包含很多可视化的元素，包括rect，circle，ellipse，line，text和path。

如果你比较熟悉计算机图形编程，那么你一定知道通常基于像素的坐标系统，其中(0,0)是我们桌面的最左上角。在(x,y)中，x表示x轴，y代表y轴，此时增加x值向右移动，而增加y值向下移动。

图像代码如下：

rect

使用rect绘制一个矩形。使用x和y指定左上角的坐标，使用宽度和高度指定尺寸。这个矩形填满了SVG整个空间：

效果：

circle

circle标签可以画一个圆圈。使用cx和cy指定中心的坐标，使用r指定半径。这个圆圈位于我们500个像素宽的SVG中间，因为它的cx(center x)值为250。

效果：

ellipse

ellipse和circle是类似的，但是每个轴需要单独的半径值，由rx和ry指定。

效果：

line

line是画一条直线。使用x1和y1指定线一端的坐标，使用x2和y2指定另一端的坐标。必须为要显示的线指定画笔颜色。

效果：

text

text用来渲染文字的。使用x指定左边缘的位置，使用y指定类型基线的垂直位置。

效果：

如果没有有意指定text的字体样式，那么text将继承其父元素的CSS指定字体样式（稍后详细介绍样式文本）。上面的文字样式，我们可以自定义设置，如下：

效果：

另外注意，当任何可视化元素在SVG的边缘上运行时，它将被剪裁。使用文字时要小心，否则会出现y操作设置无效，当我们将基线y设置为50时，可以看到这种情况发生，与SVG的高度相同。

效果：

path

path用于绘制比上面的形状更复杂的东西（如地图的国家轮廓），这个后续我们再做介绍，现在暂时使用一些简单的形状入门。

SVG 样式

SVG的默认样式是黑色填充，没有画笔。如果需要其他任何内容，则必须将样式应用于元素。

常见的SVG属性是：

fill - 填充的颜色。与CSS一样，颜色可以指定为
- named colors - orange
- hex values - #3388aa or #38a
- RGB values - rgb(10, 150, 20)
- RGB width alpha transparency - rgba(10, 150, 20, 0.5)
stroke - Stroke属性定义一条线，文本或元素轮廓颜色
stroke-width - 定义了一条线，文本或元素轮廓厚度
opacity - 透明度，一个在0.0-1.0之间的数值

使用text，您还可以使用这些属性，就像在CSS中一样：

font-family
font-size

其实SVG的样式可以使用CSS样式规则。

以下是一些直接应用于圆形的样式属性作为属性：

效果:

或者，我们可以去除样式属性，为圆圈分配一个class(就像它是一个普通的HTML元素)

然后将fill，stroke和stroke-width规则放入以新类为目标的CSS样式中：

.pumpkin {fill: yellow;stroke: orange;stroke-width: 5;}

CSS方法有一些明显的好处：

可以同时对多个元素进行样式设定，比如：

CSS代码更方便阅读（相比内联属性）

CSS代码可能更易于维护，并且可以更快的实现设计更改要求

但是，使用CSS代码定义SVG的样式可能会让一些人感到不安。毕竟，fill，stroke和stroke-width不是CSS属性。（与之CSS等价物是背景颜色和边框）。

分层和绘图顺序

Layering and Drawing Order(分层和绘图顺序)。

在SVG中没有层，也没有真正的深度概念，就好比z-index。SVG不支持CSS的z-index属性，因此形状只能排列在二维x，y平面内。

然而，如果我们绘制多个形状，它们会发生重叠，如下：

效果：

元素编码的顺序决定了对应元素的深度顺序。紫色方块第一个出现，因此第一个被渲染，然后蓝色方块呈现在紫色方块的顶部，接下来就是绿色方块，依此类推。

当有一些不应该被其他元素遮挡的视觉元素时，绘制顺序就变得很重要。例如，在一个散点图上显示轴或值标签，轴和标签应该是最后渲染，所以它们出现在任何其他元素的上层。

透明度

Transparency(透明度)

当可视化中的元素重叠但是又必须保持可见，这时可以使用透明度；或者希望突出显示其他元素和不强调某些元素时，透明度就非常有用。

有两种方法可以应用透明度：

使用带有alpha的RGB颜色
设置不透明度值。

可以在任何一个设定颜色的元素中使用rgba()，例如填充或者描边。对于红色，绿色和蓝色，rgba() 需要0到255之间的三个值，以及介于0.0到1.0之间的alpha(透明度)值。

例如：

效果：

使用rgba() 时，透明度将独立应用于填充和描边颜色。以下圆圈填充的是75%不透明，而它们的笔画只有25%不透明：

效果：

将透明度应用于整个元素，请设置不透明度属性。这是一些完全不透明的圆圈。

效果：

下面是不同透明度的圆圈:

效果图：

总结

以上是生活随笔为你收集整理的SVG入门理解的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。

入门
svg