JavaScript：用于路径'；s"；d"；属性

我试图构建一个可以在JavaScript中重复使用的函数，用于编辑SVG路径的“d”属性

目前，我能够获取属性并对其进行更改，但这是一个临时的基础。我想创建一个可重用的函数

例如，如果我有这样一个SVG：

<svg>
<path class="myPath" d="M25.914,13.143C25.477,8.58,21.678,5,17,5" />
</svg>

如何将这种工作流转换为可重用的功能？该函数应执行以下操作：

按类名查询SVG

按类名查询SVG的path元素

获取该路径的“d”属性

更改“d”属性

---

我希望能够设置它，这样我就可以简单地调用一个函数来实现这一点，我需要做的就是在最后设置“d”属性。我相信最好的方法是通过某种自定义正则表达式。

也许我不理解你，但做我理解你要求的事情很容易：

函数setPath（svgClass、pathClass、newPath）{
var元素=document.querySelector（'.+svgClass+'.+pathClass）；
setAttribute（“d”，newPath）；
}
//假设您向元素添加了一个类“mySvg”
setPath（'mySvg'，'myPath'，'M475.385,13.143C25.477,8.58,21.678,5,17,5'）；

或者，如果您希望重用相同的类而不需要每次都提供它们，您可以这样做：

函数getPathSetter（svgClass，pathClass）{
返回函数（newPath）{
var元素=document.querySelector（'.+svgClass+'.+pathClass）；
setAttribute（“d”，newPath）；
};
}
//假设您向元素添加了一个类“mySvg”
var ps=getPathSetter（'mySvg'，'myPath'）；
ps（'M375.385,13.143C25.477,8.58,21.678,5,17,5'）；
setTimeout（函数（）{
ps（'M75.385,13.143C25.477,8.58,21.678,5,17,5'）；
}, 3000);

…或者，特别是如果您希望扩展类的功能，您可以：

函数路径（svgClass，pathClass）{
this.svgClass=svgClass；
this.pathClass=pathClass；
}
Path.prototype.getPathElement=函数（）{
返回document.querySelector（'.+this.svgClass+'.+this.pathClass）；
};
Path.prototype.set=函数（newPath）{
var element=this.getPathElement（）；
setAttribute（“d”，newPath）；
};
Path.prototype.get=函数（）{
var element=this.getPathElement（）；
返回元素.getAttribute（“d”）；
};
//假设您向元素添加了一个类“mySvg”
var p=新路径（'mySvg'，'myPath'）；
p、 集合（'M375.385,13.143C25.477,8.58,21.678,5,17,5'）；
setTimeout（函数（）{
p、 集合（'M75.385,13.143C25.477,8.58,21.678,5,17,5'）；
警惕（p.get（））；
}, 3000);

我认为不清楚为什么需要RegExp以及为什么要获取属性--是否只修改现有路径的一部分？不，我想更改路径的“d”属性。谢谢Brett。那太有用了！你完全明白。这正是我想要的：）

var element = document.querySelector(".myPath"); 
element.setAttribute("d", "M475.385..."); 

function setPath (svgClass, pathClass, newPath) {
  var element = document.querySelector('.' + svgClass + ' .' + pathClass); 
  element.setAttribute("d", newPath); 
}

// Assuming you add a class "mySvg" to the <svg> element
setPath('mySvg', 'myPath', 'M475.385,13.143C25.477,8.58,21.678,5,17,5');

function getPathSetter (svgClass, pathClass) {
    return function (newPath) {  
        var element = document.querySelector('.' + svgClass + ' .' + pathClass);
        element.setAttribute("d", newPath);
    };
}

// Assuming you add a class "mySvg" to the <svg> element
var ps = getPathSetter('mySvg', 'myPath');

ps('M375.385,13.143C25.477,8.58,21.678,5,17,5');

setTimeout(function () {
    ps('M75.385,13.143C25.477,8.58,21.678,5,17,5');
}, 3000);

function Path (svgClass, pathClass) {
    this.svgClass = svgClass;
    this.pathClass = pathClass;
}

Path.prototype.getPathElement = function () {
    return document.querySelector('.' + this.svgClass + ' .' + this.pathClass);
};
Path.prototype.set = function (newPath) {
    var element = this.getPathElement();
    element.setAttribute("d", newPath);
};
Path.prototype.get = function () {
    var element = this.getPathElement();
    return element.getAttribute("d");
};

// Assuming you add a class "mySvg" to the <svg> element
var p = new Path('mySvg', 'myPath');

p.set('M375.385,13.143C25.477,8.58,21.678,5,17,5');

setTimeout(function () {
    p.set('M75.385,13.143C25.477,8.58,21.678,5,17,5');
    alert(p.get());
}, 3000);