SVG知识

SVG是什么

SVG（可缩放矢量图形）是一种用于在网络上显示图形的XML语言。

SVG的标签

path

path用于定义一个二维路径
path元素的d属性是必需的，用于指定路径的具体形状。

<path
 fill="none" 
 pointer-events="none" 
 stroke-linejoin="round" 定义了两条线段相交时如何连接，这里是round，表示连接处采用圆弧连接，使得线段交汇处更加圆滑
 stroke="#D9D9D9" 定义了路径的轮廓颜色
 stroke-width="2" 定义了路径的轮廓宽度
 d="M 284 88 L 338 88" 
>
path>

在SVG中， 元素代表“组”（group），它可以用来将多个形状或其他SVG元素组合在一起。

通过将多个形状放置在一个 元素中，您可以在SVG中创建更复杂的形状或对象。这样，您可以将多个形状视为一个单独的单元，然后在SVG中移动、旋转、缩放或应用其他变换。

此外， 元素还可以用来对SVG元素进行分组和命名，以便于管理和编辑SVG图像。您可以使用 元素中的id属性来为组命名，然后在JavaScript或CSS中引用该组。

例如，以下代码段创建了一个名为myGroup的 元素，并将两个 元素添加到其中：

<svg>
  <g id="myGroup">
    <rect x="10" y="10" width="50" height="50" fill="blue" />
    <rect x="70" y="10" width="50" height="50" fill="green" />
  g>
svg>

在这个例子中， 元素将两个矩形元素组合在一起，然后为这个组指定了一个ID。您可以在JavaScript中使用document.getElementById(“myGroup”)来引用这个组，然后对这个组应用变换或其他操作。