js修改svg path

要修改 SVG 路径（path），可以使用 JavaScript 代码来访问 SVG 元素和其属性。具体的方法是：

1. 使用 `document.getElementById()` 方法获取对应的 SVG 元素。
2. 使用 `getAttribute()` 方法获取 path 元素的 d 属性值，d 属性值即为路径坐标值。
3. 修改 d 属性值，即可改变路径形状。
4. 使用 `setAttribute()` 方法将修改后的 d 属性值设置回 path 元素。

下面是一个简单的示例代码：

// 获取 SVG 元素
var svg = document.getElementById("my-svg");

// 获取 path 元素
var path = svg.getElementById("my-path");

// 获取当前路径坐标值
var pathData = path.getAttribute("d");

// 修改路径坐标值
var newPathData = pathData + " L 100 100";

// 将新路径坐标值设置回 path 元素
path.setAttribute("d", newPathData);

上述代码将在当前路径末尾添加一条直线，可以根据具体需求修改坐标值来改变路径形状。

相关问题

js 设置svg 中path的透明度

在JavaScript中设置SVG中path元素的透明度，你可以通过修改该元素的`fill-opacity`属性（用于填充颜色的透明度）和/或`stroke-opacity`属性（用于描边颜色的透明度）。默认情况下，这两个属性的值是1（完全不透明），你可以将其设置为介于0（完全透明）和1（完全不透明）之间的任何值，来达到所需的透明效果。

这里有一个如何设置SVG中path元素透明度的示例：

// 获取SVG中的path元素
var pathElement = document.querySelector('path');

// 设置填充颜色的透明度
pathElement.style.fillOpacity = 0.5;

// 设置描边颜色的透明度（如果有描边的话）
pathElement.style.strokeOpacity = 0.75;

请注意，透明度的设置仅影响指定的颜色属性。如果path元素只有填充没有描边，那么只需调整`fill-opacity`即可；如果有描边，同时调整`stroke-opacity`属性可以分别控制描边的透明度。

svg path根据width变大

要实现 SVG path 根据 width 变大，可以使用 SVG 的 path 元素和 JavaScript 来实现。

首先，在 SVG 中定义一个 path 元素，并设置其 d 属性为一个路径字符串，表示 path 的形状。例如：

<svg viewBox="0 0 100 100">
  <path id="myPath" d="M10 50 Q 50 80 90 50" />
</svg>

这段代码会创建一个二次贝塞尔曲线路径，起点为 (10,50)，终点为 (90,50)，控制点为 (50,80)。

接着，在 JavaScript 中获取 path 元素，并根据 width 的变化来修改 path 的 d 属性。例如：

const path = document.getElementById('myPath');
const originalPath = path.getAttribute('d');
const width = 200;

path.setAttribute('d', `M${10 * width / 100} 50 Q ${50 * width / 100} ${80 * width / 100} ${90 * width / 100} 50`);

这段代码会先获取 path 的原始路径字符串，然后根据 width 的变化来计算新的路径字符串，并设置为 path 的 d 属性。在这个例子中，我们假设 width 的值为 200，因此新的路径是起点为 (20,50)，终点为 (180,50)，控制点为 (100,160) 的二次贝塞尔曲线路径。

注意，这个例子只是一个简单的演示，实际应用中需要根据具体情况来计算路径的变化。另外，如果要实现更复杂的路径变化，可能需要使用更高级的 SVG 功能，比如 SMIL 或者 CSS 动画。