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

custom attributes in Raphael path

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

我有以下代码：

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属性添加到路径？
谢谢。

js小提琴

你需要使用这里提到的自定义属性函数 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);
相关文章：