📌  相关文章
📜  创建元素 ns svg - Javascript (1)

📅  最后修改于: 2023-12-03 15:36:53.142000             🧑  作者: Mango

创建元素 ns svg - Javascript

在开发网页时，创建SVG图形是一个非常常见的需求。Javascript语言提供了一些API用于创建SVG元素，其中就包括创建命名空间为SVG的元素的功能。

1. SVG命名空间

SVG命名空间是用于表示SVG文档中元素和属性的命名空间。在Javascript中，使用SVG元素时需要指定其命名空间。 SVG命名空间的URI为http://www.w3.org/2000/svg。

2. 创建SVG元素

使用createElementNS方法可以创建SVG元素。createElementNS方法接收两个参数，第一个参数是SVG命名空间的URI，第二个参数是需要创建的元素名称。

const ns = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(ns, "svg");
3. 添加SVG元素

创建SVG元素后，需要将其添加到文档中才能显示。可以使用appendChild方法将其添加到一个已存在的元素中。

const body = document.querySelector("body");
body.appendChild(svg);
4. 设置SVG元素属性

创建SVG元素后，可以使用Javascript设置其属性。和HTML元素的属性不同，SVG元素的属性很多是复杂的值，需要使用其他API进行设置。

svg.setAttribute("width", "100");
svg.setAttribute("height", "100");
svg.setAttribute("viewBox", "0 0 100 100");
5. 创建SVG图形元素

除了创建普通SVG元素外，还可以创建SVG图形元素，例如线段、矩形、圆形等。创建SVG图形元素时需要设置其属性，使用setAttribute方法设置属性值。

const line = document.createElementNS(ns, "line");
line.setAttribute("x1", "10");
line.setAttribute("y1", "10");
line.setAttribute("x2", "90");
line.setAttribute("y2", "90");
line.setAttribute("stroke", "black");
svg.appendChild(line);
6. 示例代码

下面是一个完整的SVG示例代码，可以将其复制到HTML文件中运行。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SVG Demo</title>
  </head>
  <body>
    <script>
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("width", "100");
      svg.setAttribute("height", "100");
      svg.setAttribute("viewBox", "0 0 100 100");

      const line = document.createElementNS(ns, "line");
      line.setAttribute("x1", "10");
      line.setAttribute("y1", "10");
      line.setAttribute("x2", "90");
      line.setAttribute("y2", "90");
      line.setAttribute("stroke", "black");
      svg.appendChild(line);

      const body = document.querySelector("body");
      body.appendChild(svg);
    </script>
  </body>
</html>

以上就是使用Javascript创建SVG元素的方法。由于SVG元素结构复杂，因此创建SVG元素时需要了解其属性和方法，才能更好地实现对SVG图形的操作。