JavaScript：自定義函數對於路徑的「d」屬性

Question

我試圖構建一個函數，我可以在整個JavaScript中重新使用它來編輯SVG路徑的「d」屬性。

目前，我可以獲取該屬性並對其進行更改，但它是基於臨時的。我想創建一個可重用的函數。

例如，如果我有一個這樣的SVG：

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

要編輯與JavaScript中的「d」的屬性，我這樣做：

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

我怎麼可以把這種工作流程進入一個可重用的功能？該功能應執行以下操作：

1. 通過類名查詢SVG。
2. 按類名查詢SVG的路徑元素。
3. 獲取該路徑的「d」屬性。
4. 更改「d」屬性。

我希望能夠對此進行設置，以便我可以簡單地調用一個這樣做的函數，我需要做的就是在末尾設置「d」屬性。我相信最好的辦法是通過某種自定義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);