📅  最后修改于: 2020-10-26 06:00:38             🧑  作者: Mango
SVG代表可伸缩矢量图形。 SVG是基于XML的矢量图形格式。它提供了绘制不同形状(例如直线,矩形,圆形,椭圆形等)的选项。因此,使用SVG设计可视化效果可为您提供更多功能和灵活性。
SVG的一些显着特征如下-
让我们创建一个最小的SVG图像,并将其包含在HTML文档中。
步骤1-创建一个SVG图像,并将宽度设置为300像素,将高度设置为300像素。
在这里, svg标签启动了SVG图像,并且具有width和height作为属性。 SVG格式的默认单位是pixel 。
步骤2-创建从(100,100)开始到(200,100)结束的线,并为该线设置红色。
此处,线标签绘制一条线,其属性x1,y1表示起点, x2,y2表示终点。样式属性使用笔触和笔触宽度样式设置线条的颜色和粗细。
x1-这是第一个点的x坐标。
y1-这是第一个点的y坐标。
x2-这是第二点的x坐标。
y2-这是第二点的y坐标。
stroke-线条的颜色。
笔划宽度-线的粗细。
步骤3-创建一个HTML文档“ svg_line.html”,并集成上述SVG,如下所示-
上面的程序将产生以下结果。
要使用D3.js创建SVG,请遵循以下步骤。
步骤1-创建一个容器来保存SVG图像,如下所示。
步骤2-使用select()方法选择SVG容器,并使用append()方法注入SVG元素。使用attr()和style()方法添加属性和样式。
var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
.append("svg").attr("width", width).attr("height", height);
步骤3-类似地,如下所示,在svg元素内添加line元素。
svg.append("line")
.attr("x1", 100)
.attr("y1", 100)
.attr("x2", 200)
.attr("y2", 200)
.style("stroke", "rgb(255,0,0)")
.style("stroke-width", 2);
完整的代码如下-
上面的代码产生以下结果。
矩形由
矩形的属性如下-
x-这是矩形左上角的x坐标。
y-这是矩形左上角的y坐标。
宽度-这表示矩形的宽度。
高度-这表示矩形的高度。
SVG中的简单矩形定义如下。
可以如下所述动态创建相同的矩形。
上面的代码将产生以下结果。
圆由
圆的属性如下-
cx-这是圆心的x坐标。
cy-这是圆心的y坐标。
r-这表示圆的半径。
SVG中的一个简单圆圈如下所述。
可以如下所述动态创建相同的圆。
上面的代码将产生以下结果。
SVG Ellipse元素由
椭圆的属性如下-
cx-这是椭圆中心的x坐标。
cy-这是椭圆中心的y坐标。
rx-这是圆的x半径。
ry-这是圆的y半径。
SVG中的简单椭圆描述如下。
可以如下动态创建相同的椭圆,
上面的代码将产生以下结果。