js修改svg path
时间: 2023-12-05 20:06:22 浏览: 42
要修改 SVG 路径(path),可以使用 JavaScript 代码来访问 SVG 元素和其属性。具体的方法是:
1. 使用 `document.getElementById()` 方法获取对应的 SVG 元素。
2. 使用 `getAttribute()` 方法获取 path 元素的 d 属性值,d 属性值即为路径坐标值。
3. 修改 d 属性值,即可改变路径形状。
4. 使用 `setAttribute()` 方法将修改后的 d 属性值设置回 path 元素。
下面是一个简单的示例代码:
```javascript
// 获取 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);
```
上述代码将在当前路径末尾添加一条直线,可以根据具体需求修改坐标值来改变路径形状。
相关问题
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 动画。
js动态修改path值 svg_vue.config.js 的完整配置(超详细)!
要动态修改 SVG 文件中的 path 值,需要使用 webpack 和 svg-sprite-loader 插件。以下是完整的配置:
1. 安装 svg-sprite-loader 插件
```bash
npm install svg-sprite-loader --save-dev
```
2. 在 vue.config.js 中添加配置
```javascript
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = {
chainWebpack: config => {
const svgRule = config.module.rule('svg')
svgRule.uses.clear()
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]',
extract: true,
spriteFilename: 'img/icons.svg',
runtimeCompat: true,
publicPath: process.env.NODE_ENV === 'production' ? '/your/public/path/' : '/',
symbolDest: 'img/icons/[name].svg',
pluginHooks: {
// 用于动态修改 path 值
beforeSanitizeElements: [function (sprite) {
sprite.querySelectorAll('path').forEach((path) => {
path.setAttribute('d', 'M0 0H10V10H0z')
})
}]
}
})
const fileRule = config.module.rule('file')
fileRule.uses.clear()
fileRule
.use('file-loader')
.loader('file-loader')
.options({
name: 'img/[name].[hash:8].[ext]'
})
},
configureWebpack: {
resolve: {
alias: {
'@': resolve('src')
}
}
}
}
```
这里解释一下每个配置项的含义:
- `symbolId`:设置 SVG sprite 的 symbol id 的名字,这里使用 `icon-[name]` 的方式命名
- `extract`:是否将构建后的 sprite 文件提取出来,默认为 true
- `spriteFilename`:提取出来的 sprite 文件名称,默认为 `img/icons.svg`
- `runtimeCompat`:兼容各种运行时,可以让你在 Vue 中使用 SVG sprite,如果使用了 Vue CLI 4.x,建议开启
- `publicPath`:构建后的 publicPath,建议使用绝对路径
- `symbolDest`:构建后的 sprite 文件存储路径,这里设置为 `img/icons/[name].svg`
- `pluginHooks.beforeSanitizeElements`:使用插件钩子,在 sanitizeElements 之前修改 path 值
3. 在组件中使用 SVG sprite
```vue
<template>
<div>
<svg aria-hidden="true" class="icon">
<use xlink:href="#icon-xxx"></use>
</svg>
</div>
</template>
<script>
export default {
name: 'ComponentName'
}
</script>
<style scoped>
.icon {
width: 20px;
height: 20px;
fill: currentColor;
}
</style>
```
其中,`xlink:href` 中的 `#icon-xxx` 对应到 SVG sprite 中的 symbol id,`fill: currentColor` 可以自动填充颜色。
注意:如果要修改 SVG sprite 中的 path 值,需要在插件钩子中进行修改,具体的修改方式可以根据实际情况进行调整。