Question

我正在尝试构建一个函数，我可以在整个JavaScript中重复使用该函数来编辑＆＃34; d＆＃34; SVG路径的属性。

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

例如，如果我有这样的SVG：

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

编辑＆＃34; d＆＃34;使用JavaScript的属性我这样做：

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

我怎样才能将这种工作流程变成可重复使用的功能？该功能应该执行以下操作：

按类名查询SVG。
按类名查询SVG的路径元素。
获取＆＃34; d＆＃34;该路径的属性。
更改＆＃34; d＆＃34;属性。

我希望能够设置它，以便我可以简单地调用一个执行此操作的函数，我需要做的就是设置＆＃34; d＆＃34;属性在最后。我相信最好的方法是通过某种自定义RegEx。

Answer 1

也许我不理解你，但按照我的理解你所要求的很容易：

http://jsfiddle.net/m9K5d/

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');

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

http://jsfiddle.net/YD4R6/

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);

...或者，特别是如果您希望扩展您可以对类进行的操作，您可以这样做：

http://jsfiddle.net/KD2DL/1/

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);

JavaScript：Path的“d”属性的自定义函数

1 个答案: