使用代码实现svg

下面是一个例子

<template>
  <div class="box">
    <div ref="svgRef"></div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";

let svgRef = ref();

onMounted(() => {
  const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

  // set width and height
  svg1.setAttribute("width", "100");
  svg1.setAttribute("height", "100");

  // create a circle
  const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  cir1.setAttribute("cx", "80");
  cir1.setAttribute("cy", "80");
  cir1.setAttribute("r", "30");
  cir1.setAttribute("fill", "red");

  // attach it to the container
  svg1.appendChild(cir1);
  console.log(svgRef);
  svgRef.value.appendChild(svg1);
});
</script>
<style>
.box span {
  color: red;
}
</style>

创建 SVG 元素

首先，需要创建一个 SVG 元素。

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("width", "100" );
svg1. setAttribute ("height", "100" );

下面是 viewBox 的一个例子:

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("viewBox", "0 0 300 300" );

创建 SVG 形状

任何 SVG 元素都是这样创建的:

const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", 0 );
cir1.setAttribute("cy", 0 );
cir1.setAttribute("r", 50);

要创建其他形状，代码类似。创建 shape 标记，然后设置其属性。

创建一个形状之后，需要将其附加到 SVG 元素上:

// create svg element
const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1. setAttribute ("width", "100" );
svg1. setAttribute ("height", "100" );

// create a shape
const cir1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
cir1.setAttribute("cx", 0 );
cir1.setAttribute("cy", 0 );
cir1.setAttribute("r", 50);

// attach the shape to svg
svg1 . appendChild ( cir1 );

// attach the svg to a element on page
document.getElementById ('x77738'). appendChild ( svg1 );

将 SVG 元素附加到网页

您需要将 SVG 元素附加到网页上的一个元素上。

const svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");

// code for adding shapes ...

// attach the svg to a element on the web page
const e1 = document.getElementById ('x43865');
e1 . appendChild ( svg1 );

这件事应该最后再做。

如何编写 SVG 脚本？

记住 SVG 只是 XML。(XML 类似于 HTML，但语法更加严格)所以，要编写 SVG 脚本，您不必做任何特殊的事情。只需要使用 JavaScript 编写普通的 XML 脚本。

以下是你需要做的。

1. 使用“ createElementNS”创建一个 SVG 元素
2. 使用“ createElementNS”创建 SVG 形状元素(例如，circle、 rect、 path、 ... ...)
3. 将 shape 元素附加到 SVG 元素
4. 将 SVG 元素附加到文档中

创建一个圆

<template>
  <div ref="circle"></div>
</template>
<script setup>
import { onMounted, ref } from "vue";
let circle = ref();
onMounted(() => {
  const cos = Math.cos;
  const sin = Math.sin;
  const π = Math.PI;

  const f_matrix_times = ([[a, b], [c, d]], [x, y]) => [
    a * x + b * y,
    c * x + d * y,
  ];
  const f_rotate_matrix = (x) => [
    [cos(x), -sin(x)],
    [sin(x), cos(x)],
  ];
  const f_vec_add = ([a1, a2], [b1, b2]) => [a1 + b1, a2 + b2];

  const f_svg_ellipse_arc = ([cx, cy], [rx, ry], [t1, Δ], φ) => {
    Δ = Δ % (2 * π);
    const rotMatrix = f_rotate_matrix(φ);
    const [sX, sY] = f_vec_add(
      f_matrix_times(rotMatrix, [rx * cos(t1), ry * sin(t1)]),
      [cx, cy]
    );
    const [eX, eY] = f_vec_add(
      f_matrix_times(rotMatrix, [rx * cos(t1 + Δ), ry * sin(t1 + Δ)]),
      [cx, cy]
    );
    const fA = Δ > π ? 1 : 0;
    const fS = Δ > 0 ? 1 : 0;
    // 命名空间
    var SVG_NS = "http://www.w3.org/2000/svg";
    var svgArea = document.getElementById("circle");

    // 1、创建svg容器
    var svg = document.createElementNS(SVG_NS, "svg");

    // 2、创建svg中的 tag, 如rect

    const path_2wk2r = document.createElementNS(SVG_NS, "path");
    path_2wk2r.setAttribute(
      "d",
      "M " +
        sX +
        " " +
        sY +
        " A " +
        [rx, ry, (φ / (2 * π)) * 360, fA, fS, eX, eY].join(" ")
    );

    // 4、将tag塞进svg中
    svg.appendChild(path_2wk2r);
    // 5、将svg塞进指定容器

    return svg;
  };
  let svgDom = f_svg_ellipse_arc([100, 100], [30, 30], [5, 5], 5);

  circle.value.appendChild(svgDom);
});
</script>