在路径 svg css 中更改 d

在SVG和CSS中，可以使用路径（path）元素和属性来创建和修改图形。路径中的"d"属性定义了路径的形状和方向，该属性可以被修改以更改路径的形状和方向。

SVG中更改"d"

方法1：手动修改

在SVG中，可以通过手动修改"d"属性来更改路径的形状和方向。您可以使用一些SVG编辑器，如 Inkscape 或 Illustrator，来手动更改SVG路径。

假设我们有以下SVG路径：

<svg width="100" height="100">
  <path d="M20 20 L80 80" fill="none" stroke="black" />
</svg>

我们想要将该路径的终点改为(80, 20)，可以将"d"属性更改为：

<svg width="100" height="100">
  <path d="M20 20 L80 20" fill="none" stroke="black" />
</svg>

方法2：使用JavaScript修改

您还可以使用JavaScript来修改SVG路径的"d"属性。以下是一个例子：

var path = document.querySelector("path");
path.setAttribute("d", "M20 20 L80 20");

在此示例中，我们使用querySelector选择了第一个path元素，并将其"d"属性更改为"M20 20 L80 20"。

CSS中更改"d"

在CSS中，也可以使用"path"属性来创建并修改路径的形状和方向。与SVG不同的是，CSS的"path"属性可以应用于任何具有"border"或"background"属性的HTML元素。

方法1：使用关键字值

在CSS中，您可以使用关键字值来定义路径的形状和方向。以下是一些示例：

/* 直线 */
border-top: 2px solid black;

/* 矩形 */
background: black;
height: 50px;
width: 100px;

/* 圆形 */
background: black;
border-radius: 50%;
height: 100px;
width: 100px;

/* 椭圆 */
background: black;
border-radius: 50%/100% 50%;
height: 100px;
width: 200px;

方法2：使用路径值

另外，您还可以在CSS中使用路径（path）值来创建更复杂的形状。以下是一个示例：

background-image: path("M10,10 L90,10 L50,90 Z");

在此示例中，我们使用"path"函数创建了一个三角形，该三角形由三个线段组成，顺序为(10,10)->(90,10)->(50,90)->(10,10)。

结论

在路径(SVG/CSS)中更改"d"属性可以让我们轻松地修改路径的形状和方向。无论您是在SVG还是CSS中使用路径，这个技巧都是非常有用的。