d3js学习——4.svg

最新推荐文章于 2024-04-11 00:37:10 发布

婉兮娈兮

最新推荐文章于 2024-04-11 00:37:10 发布

阅读量174

点赞数

分类专栏： d3js 文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_44535441/article/details/131704746

版权

d3js 专栏收录该内容

8 篇文章

订阅专栏

SVG是一种基于XML的矢量图形格式，常用于创建可缩放的图形。它可以表示为DOM，允许通过属性指定样式。文章展示了如何使用SVG语法绘制直线、矩形、圆形和椭圆，并通过D3.js库动态添加到HTML文档中，强调了SVG在图形绘制中的灵活性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SVG 代表 scalable vector graphics，是一种基于 XML 的矢量图形格式，提供了绘制不同形状的选项：直线、矩形、圆形、椭圆等。

SVG的显著特征：

SVG是基于矢量的图像格式，它是基于文本的。
SVG在结构上与HTML类似。
SVG可以表示为Document object model 。
可以将SVG属性指定为属性。
SVG应该具有相对于原点（0,0）的绝对位置。
SVG可以包含在HTML文档中。

svg 格式的默认单位的 Pixel.

直线-line

x1 - 这是第一个点的x坐标。
y1 - 这是第一个点的y坐标。
x2 - 这是第二个点的x坐标。
y2 - 这是第二个点的y坐标。
stroke - 线条的颜色。
stroke-width - 线的粗细。

<!-- 一条从(100,100)=>(200,200)的红色直线 -->
<svg width="500" height="500">
  <line
    x1="100"
    x2="200"
    y1="100"
    y2="200"
    style="stroke: brown; stroke-width: 2"
  ></line>
</svg>

<div id="svgcontainer"></div>

var width = 300;
var height = 300;
var svg = d3.select("#svgcontainer")
   .append("svg").attr("width", width).attr("height", height)
srv.append("line")
   .attr("x1", 100)
   .attr("y1", 100)
   .attr("x2", 200) 
   .attr("y2", 200)
   .style("stroke", "rgb(255,0,0)")
   .style("stroke-width", 2);

矩形-rect

x - 这是矩形左上角的x坐标。
y - 这是矩形左上角的y坐标。
width - 这表示矩形的宽度。
height - 表示矩形的高度。
fill - 表示矩形的颜色。

let svg = d3
    .select(".rec")
    .append("svg")
    .attr("width", 500)
    .attr("height", 500);
svg
    .append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 200)
    .attr("height", 100)
    .attr("fill", "green");

圆元素-circle

cx - 这是圆心的x坐标。
cy - 这是圆心的y坐标。
r - 这表示圆的半径。

svg
    .append("circle")
    .attr("cx", 100)
    .attr("cy", 100)
    .attr("r", 50)
    .attr("fill", "red");

椭圆-ellipse

cx - 这是椭圆中心的x坐标。
cy - 这是椭圆中心的y坐标。
rx - 这是圆的x半径。
ry - 这是圆的y半径。

svg
    .append("ellipse")
    .attr("cx", 200)
    .attr("cy", 50)
    .attr("rx", 100)
    .attr("ry", 50)
    .attr("fill", "yellow");