Raphael also breaks if requires merely existent on the page. If require is not undefined (and in case requirejs is loaded, require is defined), eve won't be added to the global scope.

Firefox 3.0.11 i am loading both prototype and jquery libraries prior to loading raphael 0.8. jquery is in noconflict mode. i don't know if any of that matters, but providing it just in case.

i'm using the uncompressed raw file for ease of hunting down issues.

when i load up 0.8 in FF i get this error:

Error: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMSVGLocatable.getBBox]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://local.www.sqibl.com/js/raphael.0.8.js :: anonymous :: line 1135" data: no] Source File: http://local.www.sqibl.com/js/raphael.0.8.js Line: 1135

when i click through, the offending line it takes me to is actually line 1136 which is: var bbox = this.node.getBBox();

I'm trying to use Raphaeljs to simplify the PHP code I use to generate SVG (for IE I used to convert to images the result). However I couldn't find how to generate clip path with Raphael. Is it possible? Here is for instance a sample SVG clip path:

Hi,

Added textPath support to both SVG and VML. The SVG version was mostly done by myself, but the VML one was done by Mathieu Le Gac-Olanié and Patrick Dura.

The function textPath takes the following parameters:

• pathString : the path on which to draw the text
• text : the text to display

Example usage: var txt = paper.textPath("M25, 100 C10,10 175,10 175,100", "Hello text-on-a-path world!"); txt.attr({'fill': '#FF0000', 'font-size': 15});

Best,

Oussama Mubarak http://semiaddict.com

Library: "raphael": "^2.2.8"

Summary: all work as expected apart from the console error

Description: I want to render a line with an arrow end, but when adding "arrow-end" attribute, it throw an Error: "attribute d: Expected number, "….68028259277344CNaN,NaN,NaN,NaN,…". weirdly when adding "arrow-start" attribute there is no error

I tried already to change the stroke-width, it didn't help

This is the code: http://jsfiddle.net/fzjc81ym/ (don't see an error in console through the js fiddle, only in my repository)

this.canvas = Raphael('grid', '100%', '100%');

drawLine(this.canvas, path1, duration, arrowAtrr, color, strokeDasharray, strokeWidth, arrowend).then(() => this.resolve(item, callback))

const drawLine = (canvas, pathStr, duration = 1000, attr = arrowAtrr, color = Color.GREEN, strokeDasharray = '-', strokeWidth = 4, arrowend = "block-wide-long") => {
    return new Promise((resolve) => {
        attr.stroke = color;
        attr['stroke-dasharray'] = strokeDasharray;
        attr['stroke-width'] = strokeWidth;
        attr['arrow-end'] = arrowend
        var guidePath = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var path = canvas.path(pathStr).attr({ stroke: 'none', fill: 'none' });
        var totalLength = guidePath.getTotalLength(guidePath);
        var startTime = new Date().getTime();
        var intervalLength = 25;

        var intervalId = setInterval(function () {
            var elapsedTime = new Date().getTime() - startTime;
            var thisLength = elapsedTime / duration * totalLength;
            var subPathStr = guidePath.getSubpath(0, thisLength);
            attr.path = subPathStr;
            path.attr(attr)
            path.animate(attr, intervalLength);

            if (elapsedTime >= duration) {
                clearInterval(intervalId);
                resolve();
            }

        }, intervalLength);

    });
}

Any idea how to solve that error?

In raphael.js on lines 6352 - 6354:

var bb = el._getBBox(),
  dif = a.y - (bb.y + bb.height / 2);
dif && R.is(dif, "finite") && $(tspans[0], {dy: dif});

I can reproduce the issue whereby the value of bb is calculated as:

height: 0
width: 0
x: 0
y: 0

a.x = 65 and a.y = 65, resulting in a caluculated dy value of 65, which essentially doubles the y offset for the given <tspan>.

In _getBBox() the value of this.node.style.display is "" and this.node.getBBox() returns the object seen above.

pathBBox() is returning a reference rather than a copy of the cached bbox value, which means the value can be accidentally written over.

Because this function is also used internally for Element.getBBox(), it's causing weird bugs like:

console.log(paper.text(0,0,"hello").getBBox().x); // => -11 Correct!
var a = paper.text(0,0,"hello");
console.log(a.getBBox().x); // => -11 Correct!
a.translate(10,0);
console.log(paper.text(0,0,"hello").getBBox().x); // => -1 Wrong!

Simple fix:

-            return pth.bbox;
-           return clone(pth.bbox);

Can't unregister drag action. for example,

var R=Raphael("test",200,100); var img=R.image("test.png",0,0,100,100); function move(){ (any move action) }; function start(){ (any start action) }; function up(){ (any up action) }; img.drag(move,start,up); img.undrag(move,start,up);

So simple example.But,undrag method doesn't work and I still can drag this image.

Ofcourse,other "un" method (such as unclick) works well.

Hi i'm developing an ember app using ember-cli and i'm trying to use Raphael.js but when i put it in my page with

<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

it will return

Uncaught ReferenceError: eve is not defined 

i read that Raphael.js have problem with RequireJS, could be related?

someone have used it successfully?

thanks a lot

true should translate to "none" (i.e., no preservation of aspect ratio, stretching/shrinking to fill available space - assuming that was the intent of this parameter value - not clear from the documentation), whereas it currently translates to "meet", which is not a valid value .

Different browsers deal with this invalid value differently:

• iOS 6.01, Chrome 23.0.1271.97, and Firefox 17.0 effectively act as if "xMidyMid meet" had been specified; i.e., they DO preserve the aspect ratio and center the result - an option that setViewBox() doesn't even expose.
• Android browsers, by contrast, do seem to act as requested (no preservation of aspect ratio; content stretches/shrinks to fill the container).

By contrast, specifying "false" for fit presumably acts as intended (though the exact intended behavior is not clear from the documentation): aspect ratio is preserved and the result is placed in the top left corner.

Workaround - SVG ONLY:

Assign the correct value to the preserveAspectRatio SVG attribute directly. For instance, if p is your Raphael paper, call the following after having called setViewBox() with fit set to true:

p.canvas.setAttribute('preserveAspectRatio', 'none');

Incidentally, this approach also allows you to specify values not currently exposed by setViewBox(). For instance, if you wanted to preserve the aspect ratio and center the result (without clipping), invoke the following:

p.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');

See http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute for all possible values.

P.S.: Sadly, irrespective of this bug, even with preseveAspectRatio set to the valid value none, not all SVG-capable browsers act the same; see http://jsfiddle.net/mklement/7rpmH/

I don't know why you removed this code from Raphael (I'm still new to this very useful library), but after putting it back (with some adjustments), it makes g.Raphael to work.

And Raphael seems to work too, as far as I tested.

Integration tests are not passing, but they're not passing with the 2.0 release either, so I guess I did not break anything here.

Hello, I have an svg picture like this, with M and m in the path. I can get all the points by calling Raphael.getTotalLength(path), but how can I know from which point is the path behind m. I want to know all the absolute coordinate points of the inner border of the svg, so that I can get a data format similar to the following [[points of the outer border], [points of the inner border]].

Untitled-2.svg.zip

This is how I achieved it. I can get all the points, but I can’t distinguish which are the points of the inner frame and which are the points of the outer frame.

let points = [];
for (let i = 0; i < Raphael.getTotalLength(path); i += step_point) {
    const point = Raphael.getPointAtLength(path, i);
    points.push(point);
}

I really look forward to your answers, thank you!

i have doubt in adding a barcode into raphael js but i found jsbarcode with svg format but i don't how to add into raphael js workspace.

1.raphael js

var paper = Raphael('holder'); 2.svg

var svg= document.createElement("svg");
JsBarcode(svg, "Hi world!");
how to add svg into raphael js?

When a draggable element is touched and moved for the first time, then the webpage also scrolls. Of course it happens only if the website can scroll, e.g. the page is larger than the visible area.

I can reproduce it with the code below in the ZIP in Chrome. On Desktop you just turn on the mobile emulator in the dev console. I have created a pretty high div so the webpage itself is higher than the visible area. Now click on the blue or red item and drag it vertically -> The page will also scroll. If you drop it and then drag the same item again, it will not scroll. But if you switch to the next item it will scroll again.

Is there anything I can do better in the code? This is just a small test, copied from some codepen, but I got the same problem in a real project which is too large to post here.

drag-raph.zip