Svg raphael.js-自定义属性

是否可以为raphael元素定义自定义属性

e、 g

---

我之所以需要它，是因为我想在一整套元素上制作一些相当复杂的动画，我想在某个地方存储每个元素的原始y坐标。

是的，您应该能够执行以下操作：

.attr({title: value});

当然，title是要设置或创建的属性的名称，value应该是值。当然，所讨论的拉斐尔元素将是attr的接受者。

我认为您可以做到：

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});

然后

---

希望这有帮助。

是您想要的自定义属性：

用于记录和检索任意数据的简单存储

更改自定义操作时需要执行的属性（如使用Raphael的

.attr（）

和

.animate（）

控制的属性）

您想在页面/DOM上的输出SVG/VML标记的属性中强制添加什么内容？（通常不推荐，但有时需要）

1.自定义数据存储和检索 我99%确信，在Raphael中存储任意数据的官方方法是使用

.data（）

函数，例如

var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});
// set it
circle.data('custom-attribute', 'value');

// get it
data = circle.data('custom-attribute');
alert(data);

请注意，从Raphael 2.1开始，这适用于元素，不设置。当我需要将数据分配给一个集合时，我倾向于使用

for

循环来设置它，并使用

someSet[0]来获取它。data（）

-有点模糊，但它可以工作

令人恼火的是，在写这篇文章的时候，他根本没有说这是为了什么。。。但是jQuery中的

.data（）

，HTML5中的

data-*

等等都有这个目的，像这样使用它是可行的，所以我非常确信这是将任意数据附加到Raphael对象的预期方法

---

2.由

attr（）或
animate（）触发的自定义函数
如果您需要一个行为类似于Raphael属性的自定义属性—使用
attr
或
animate
（有点像Raphael钩子）更改时触发函数或转换—这就是它的用途。它定义了一个函数，该函数在为
纸张
对象中的任何元素设置命名自定义属性时随时执行。返回对象应用于元素的标准属性

官方文档中有一些非常有用的例子，下面是一个经过改编的例子：

// A custom attribute with multiple parameters:
paper.customAttributes.hsb = function (h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
var c = paper.circle(10, 10, 10);
// If you want to animate a custom attribute, always set it first - null isNaN
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);

请注意，
此
在每个customAttribute执行中都是为其设置属性的Raphael对象。这意味着


3.在浏览器的SVG或VML标记中强制自定义属性
拉斐尔并不真的支持这一点，所以只有在你真的，真的需要的时候才这样做。但是如果您确实需要Raphael不支持的标记中的某些内容，您可以创建一个基本控件，使用
attr
和
animate
通过
paper.customAttributes
和
element.node
（请注意，
element.node
的文档几乎完全没有帮助“”-您不应该弄乱它的原因是，它直接给您SVG或VML元素，这意味着Raphael不知道您对它所做的任何更改，这可能会使Raphael对象与其控制的元素不同步，可能会破坏内容。除非您小心，并使用类似的技术…）

下面是一个示例（假设也在使用jQuery，jQuery不是必需的，但更方便），它设置SVG属性
dy
，允许您控制Raphael文本的行距（注意-示例代码尚未在VML/IE中测试。如果在VML模式下不起作用，则会更新）：


paper.customAttributes.lineHeight=函数（值）{
//设置SVG dy属性，Raphael不控制该属性
var selector=Raphael.svg？'tspan'：'v:textpath'；
var$node=$（this.node）；
var$tspans=$node.find（选择器）；
$tspans.each（函数（）{
//在jquery v1.6+中使用$（this）.attr，在SVG中失败。我已经尝试过这种方法，但没有成功。我认为我仅限于SVG规范中定义的属性：（哦，你想把它添加到实际的DOM元素中吗？是的，我不相信你能用Raphael做到这一点，即使使用SVG允许的属性，比如id。如果你的脚本没有在Javascript级别重新加载上述功能。这是可行的，但可能不是最佳做法-例如，Raphael的未来版本理论上可能会使用相同的名称空间，或者循环遍历Raphael对象的所有属性。可能最好使用Raphael提供的.data函数（尽管文档中没有提示这是它的用途…）如何在选择器中访问此数据？例如var found=document.queryselectoral（“[transaction=”）+current_transaction+“']”；@jacktheripper老实说，我不知道。我从来没有真正成功地找出数据的位置（）数据是存储的。据我所知，它可能存储为DOM svg/vml元素的一个属性。我通常通过创建大量包含Raphael对象引用的树层次结构来避免使用选择器，以预测选择需要。你的问题听起来像是一个很好的问题。有人可以给出比meI更好的答案t:还联系了插件制造商-他可能知道：p
var circle = r.circle(25,50,10).attr({fill:'#b71e16', stroke:'#71140f'});
// set it
circle.data('custom-attribute', 'value');

// get it
data = circle.data('custom-attribute');
alert(data);

// A custom attribute with multiple parameters:
paper.customAttributes.hsb = function (h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
var c = paper.circle(10, 10, 10);
// If you want to animate a custom attribute, always set it first - null isNaN
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);

paper.customAttributes.lineHeight = function( value ) {
    // Sets the SVG dy attribute, which Raphael doesn't control
    var selector = Raphael.svg ? 'tspan' : 'v:textpath';
    var $node = $(this.node);
    var $tspans = $node.find(selector);
    $tspans.each(function(){
        // use $(this).attr in jquery v1.6+, fails for SVG in <= v1.5
        // probably won't work in IE
        this.setAttribute('dy', value );
    });
    // change no default Raphael attributes
    return {};
}
    // Then to use it...
    var text = paper.text(50,50,"This is \n multi-line \n text");
    // If you want to animate a custom attribute, always set it first - null isNaN
    text.attr({lineHeight: 0});
    text.animate({lineHeight: 100},500);