JavaScript:路径的自定义函数's”;d”;属性

JavaScript: Custom Function For Path's "d" attribute

本文关键字：属性 路径 自定义函数 JavaScript      更新时间：2023-09-26

我正在尝试构建一个函数，该函数可以在整个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。

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

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);
相关文章：