复制
收藏
提问
简洁
<g transform="translate( 200 350 )"></g> 如何使用js j将translate中的200 改为450
2个月前
全网
文档
学术
百科
知识库
回答简洁模式
深入研究一些
使用JavaScript修改SVG元素的transform
属性中的translate
值,可以通过以下步骤实现:
- 首先获取SVG中的
<g>
元素。 - 然后解析当前的
transform
属性值。 - 修改
translate
的参数值。 - 将新的
transform
值设置回<g>
元素。
以下是具体的JavaScript代码示例:
// 假设你的<g>元素有一个id,如果没有,你可以使用其他选择器来获取它
var gElement = document.getElementById('your-g-element-id');
// 获取当前的transform属性值
var transformValue = gElement.getAttribute('transform');
// 使用正则表达式匹配translate中的数值
var translateRegex = /translate$(\d+) (\d+)$/;
var matches = transformValue.match(translateRegex);
// 如果找到匹配项,则更新translate的x值
if (matches) {
var newXValue = 450; // 你希望设置的新x值
var newYValue = matches[2]; // 保持原始的y值不变
// 构造新的transform字符串
var newTransformValue = `translate(${newXValue} ${newYValue})`;
// 设置新的transform属性值
gElement.setAttribute('transform', newTransformValue);
}
请确保将'your-g-element-id'
替换为你的<g>
元素的实际ID。如果你的<g>
元素没有ID,你可以使用其他CSS选择器来获取它,例如类名或数据属性等。1
你觉得结果怎么样?