作为设计师，您可能熟悉 SVG 图像的所有优点。它们易于扩展，在调整大小时不会失去质量，并且文件大小相对较小。在本课中，我们将解释如何在代码中嵌入 SVG 图形，以及如何在没有任何绘图软件的情况下实际绘制 SVG 元素。
SVG（Scalable Vector Graphics）是一种基于 XML 的标记语言，用于描述二维矢量图形。简单地说，SVG 之于图像就像 HTML 之于文本。顾名思义，与光栅图像（JPG、GIF 和 PNG）不同，SVG 允许您在不损失图像质量的情况下任意放大或缩小矢量图像。
SVG 格式的其他优点是什么？
• 您可以使用任何文本编辑器或绘图软件（如 Illustrator 甚至 Figma 和 Sketch）编辑 SVG 文件。
• 打印时在任何分辨率下都不会损失其质量。
• 您可以为 SVG 图像制作动画并添加指向其他文档的链接。
要在 HTML 页面上添加 SVG 图像，您应该使用<svg>容器元素。
宽度和高度属性
在<svg>标签中，width属性height不会缩放图像。当您使用内联 SVG（即<svg>直接放入您的 HTML 代码）时，width参数height定义网页内的图像区域，但图形的大小和位置保持不变。
对于实际缩放图像本身并定义图像纵横比，您应该使用魔法viewbox属性。语法由 4 个数字组成，其中前 2 个是 x 和 y 坐标，后跟以像素为单位的宽度和高度参数。
基本 SVG 形状
许多人将绘画视为一种技能或才能，有些人有幸而另一些人则没有。好吧，如果您属于后一类，我们有好消息要告诉您。借助基于 XML 的图像 SVG，您可以使用基本的数学技能和文本编辑器（如记事本）创建和编辑图形。
任何 SVG 图像的构建块都包括<circle>、、、、、和等元素。它们介于开始标签和结束标签之间，并包含定义其颜色、形状、大小和其他参数的属性。 <rect><ellipse><line><polyline><polygon><path><svg>
SVG 圆圈
要使用 SVG 创建圆形，您需要该<circle>元素。与 SVG 中的所有图形形状一样，它包含一个正斜杠 — <circle/>— 并且不需要闭包，因此您不必担心放置结束标记。
该属性定义圆心坐标，而该属性cx指定半径。但是，如果省略属性并且圆的中心设置为 (0,0) 点，该点对应于左上角。cyrcxcy,
SVG 椭圆
椭圆通常看起来像一个被压扁的圆，尽管圆实际上是一种特殊的椭圆。与元素的唯一区别<circle>是您定义了<ellipse>半径的 2 个参数 -ry和rx. 和属性相同，指定椭圆中心坐标cx。cy
SVG 矩形
要在屏幕上绘制矩形，您需要<rect>具有 6 个属性的元素来控制位置和形状：
•x定义矩形左上角的水平位置。
•y定义矩形左上角的垂直位置。
• 该width属性设置矩形的宽度。
• 该height属性设置矩形的高度。
•rx和ry属性定义圆角的水平和垂直半径。如果省略它们，它们默认为 0。
SVG线
该<line> 元素看起来像一个简单的形状，但需要 4 个属性。您为连接并形成一条线的两个点定义x(x1; x2) 和y(y1; y2) 坐标。该<line>元素还具有stroke指定笔触颜色和宽度的属性。如果省略这些参数，则该行将不可见。
SVG 多边形
该<polygon>元素由与直线段相连的点组成，这些直线段连接在一起形成一个封闭的形状。形状中的点数由您决定，您还可以决定用颜色填充形状或将其留空。
该属性points定义点列表（x,y 绝对坐标对）。要设置笔触并指定填充颜色，您可以使用stroke和fill属性。
如果fill属性设置为"none"，不要忘记指定笔画。否则，您的多边形将保持不可见。
SVG 文本
使用 SVG，您还可以在网页上绘制……文本 — 那怎么样？此外，浏览器将元素呈现<text>为图形，因此您可以缩放或旋转它。因为它的作用类似于文本，所以用户可以像文本一样选择和复制它。属性定义了左上角的位置，而填充属性定义了填充颜色x。y您还可以使用font-size属性设置以像素为单位的字体大小。
SVG 笔画属性
stroke 属性包含几个属性，您可以将这些属性应用于元素的线条、文本或轮廓：
•stroke属性定义颜色。
• 该stroke-width属性定义线条的粗细。
• 该stroke-linecap属性定义开放路径的结束类型。
它们可以是对接的、方形的和圆形的。前两个具有相同的外观，除了一个点 - square 属性将笔触拉伸到稍微超出实际路径。
•该stroke-dasharray属性允许您创建虚线。
该属性包含一组逗号分隔的数字，其中第一个指定填充区域的宽度，第二个指定空白区域的宽度
SVG 圆圈
用于绘制圆的元素称为<circle>。如果您想选择特定的填充颜色或设置笔触，您有两个选择：您可以使用和属性或使用具有、和属性的内联 CSS 样式。从技术上讲，没有区别，您可以选择您更喜欢的任何方法。 fillstrokefillstrokestroke-width
例如，要绘制一个黄色圆圈，我们使用以下语法：fill="yellow"
SVG 多边形
该<polygon>元素非常相似<polyline>——它们都由多个相互连接的点组成。唯一的区别是它<polygon>是一个封闭的形状，它的最后一点延伸到第一个。相反，它<polyline> 是一个开放的形状。
多边形应该至少有 3 个边（然后你会得到一个三角形），对于每个角，我们使用 points 属性设置 x 和 y 坐标。例如，要绘制两个相等边的红色三角形，可以使用以下语法：<polygon points="205,10 250,160 160,160" style="fill:red;"/>.
SVG 文本
如果我们可以打字，为什么我们需要用 SVG 来绘制文本？开发人员和网页设计师有时可能会<text>因为其图像属性而使用该元素。SVG 允许您像图形一样修改文本并应用渐变、图案、剪切路径、蒙版或过滤器。
SVG线
该<line>元素是一个基本的 SVG 形状，用于在两点之间创建一条线。记得指定stroke指定填充颜色的属性；否则，没有人会在网页上看到该行。在提供的示例中，我们还使用该stroke-dasharray属性来定义破折号和间隙的模式。
以上内容为转载
网友评论