Question

我有以下代码：

var rsr = Raphael('rsr2', '660', '400');
var Layer_x0020_1 = rsr.set();
var path_a = rsr.path(" M154 263l9 41 -1 5c-17,-4 -38,-11 -56,-20l18 -37c10,4 19,8 30,11z");
path_a.attr({
    class: 'fil0',
    filter: 'url(#Filter)',
    "level":"5",
    parent: 'Layer_x0020_1',
    'stroke-width': '0',
    'stroke-opacity': '1'
}).data('id', 'path_a');
Layer_x0020_1.attr({
    'id': 'Layer_x0020_1',
    'filter': 'url(#Filter)',
    'name': 'Layer_x0020_1'
});
$('path').attr({'fill':'#b4b3b0'});
var rsrGroups = [Layer_x0020_1];

有level属性。但是，Raphael无视它。这是标记生成Raphael：

<div id="rsr2">
  <svg height="400" version="1.1" width="660" xmlns="http://www.w3.org/2000/svg" style="overflow:hidden;position:relative">
    <desc>Created with Raphaël 2.1.0</desc>
    <defs></defs>
    <path style="stroke-opacity: 1" fill="#b4b3b0" stroke="#000000" d="M154,263L163,304L162,309C145,305,124,298,106,289L124,252C134,256,143,260,154,263Z" stroke-width="0" stroke-opacity="1"></path>
  </svg>
</div>

如何对Raphael添加level属性添加到路径？感谢。

jsFiddle

Answer 1

您需要使用此处提到的customAttributes函数http://raphaeljs.com/reference.html#Paper.customAttributes

该链接的示例代码，此处为hue是自定义属性

 paper.customAttributes.hue = function (num) {
num = num % 1;
return {fill: "hsb(" + num + ", 0.75, 1)"};
};
// Custom attribute “hue” will change fill
// to be given hue with fixed saturation and brightness.
// Now you can use it like this:
var c = paper.circle(10, 10, 10).attr({hue: .45});
// or even like this:
c.animate({hue: 1}, 1e3);

// You could also create custom attribute
// with multiple parameters:
paper.customAttributes.hsb = function (h, s, b) {
    return {fill: "hsb(" + [h, s, b].join(",") + ")"};
};
c.attr({hsb: "0.5 .8 1"});
c.animate({hsb: [1, 0, 0.5]}, 1e3);

拉斐尔路径中的自定义属性

1 个答案: