svg - generate - raphael.js-atributos personalizados

snap svg

Question

¿Es posible definir un atributo personalizado para un elemento rafael?

p.ej

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

La razón por la que necesito esto es porque quiero hacer una animación bastante compleja en un conjunto completo de elementos y quiero almacenar la coordenada y original para cada uno.

Answer 1

Creo que puedes hacer:

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

entonces

circle["custom-attribute"] = value;

Espero que esto ayude.

Answer 2

Es el atributo personalizado que desea:

1. ¿Una tienda simple para datos arbitrarios, para ser grabados y recuperados?
2. Un atributo donde una acción personalizada necesita ser tomada cuando se cambia (como los atributos controlados con .attr() y .animate() )
3. ¿Algo que quiera forzar en los atributos del marcado de salida SVG / VML en la página / DOM? (no se recomienda normalmente, pero a veces es necesario)

1. Almacenamiento y recuperación de datos personalizados

Estoy 99% seguro de que la forma oficial y prevista para almacenar datos arbitrarios en Raphael es usar la función .data() , por ejemplo

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);

Tenga en cuenta que a partir de Raphael 2.1 esto funciona para elementos, no conjuntos . Cuando necesito asignar datos a un conjunto, tiendo a configurarlo con un ciclo for y lo obtengo con someSet[0].data() - un poco difícil, pero funciona.

Es irritante que la documentación de .data no diga nada sobre para qué sirve (al momento de escribir) ... pero .data() en jQuery, data-* en HTML5, etc. todos tienen este propósito, usándolo al igual que esto funciona, y otros en SO dicen que está destinado a ser utilizado así , así que estoy bastante seguro de que este es el método previsto para adjuntar datos arbitrarios a los objetos de Raphael.

2. Funciones personalizadas activadas por attr() o animate()

Si necesita un atributo personalizado que se comporte como los atributos de Raphael, desencadenando una función o transformación cuando se cambia utilizando attr o animate (algo así como un gancho de Rafael), para eso paper.customAttributes . Define una función que se ejecuta cada vez que se establece attr personalizado con nombre para cualquier elemento en ese objeto de paper . El objeto de retorno se aplica a los atributos estándar del elemento.

Los documentos oficiales tienen algunos ejemplos bastante útiles para este, aquí hay uno adaptado:

// 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);

Tenga en cuenta que this dentro de cada ejecución de attributeAttribute es el objeto de Raphael para el cual se establece el attr. Esto significa...

3. Forzar atributo personalizado en el marcado SVG o VML en el navegador

Raphael en realidad no lo admite, así que solo haz esto si realmente lo necesitas. Pero si realmente necesita algo en el marcado que Raphael simplemente no admita, puede crear un control rudimentario para manipularlo utilizando attr y animate utilizando paper.customAttributes y element.node (tenga en cuenta que la documentación para element.node es más o menos el muy poco útil " No te metas con eso ", la razón por la que no debes meterse con eso es que te da el elemento SVG o VML directamente, lo que significa que Raphael no conoce ninguno de los cambios que haces a ella, lo que puede poner su objeto Raphael fuera de sincronización con el elemento que controla, potencialmente rompiendo cosas. A menos que tenga cuidado, y use una técnica como esta ...).

Aquí hay un ejemplo (suponiendo que jQuery también se esté usando, jQuery no es esencial pero es más conveniente) que establece la propiedad SVG dy , que le permite controlar el espaciado entre líneas del texto de Raphael (nota: código de ejemplo aún no probado en VML / IE . se actualizará si no funciona en modo VML):

Ejemplo de jsfiddle en vivo

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);

Answer 3

Sí, debería poder hacer lo siguiente:

.attr({title: value});

Por supuesto, título es el nombre del atributo que desea establecer o crear, y el valor debe ser el valor. Por supuesto, el elemento rafael en cuestión sería el receptor de attr.