aliasio / raphael.export Goto Github PK

hi, guy

Cay you tell me why you set the font style like 'font: normal normal normal 10px/normal'; what's the meaning for that?
In fact, we could just use the inline property to set the style(font-size, font-weight....).

Looking for your feedback.

thanks,

starandtina

Paths that have been dragged (with ElbertF's free transform tool) show up in their original location in the svg resulting from toSVG(). The dragged dot will be in the correct place (the location the path was dragged to, but the path will be in its original location. Looking through your code I was not clever enough to see why the paths in, say a rectangle, are correctly handled while a simple path and custom objects made of path primitives are not.

At line 174, an uncaught TypeError happens because value is undefined. The problem seems to happen when stroke is at "none" on a path tag. For what it's worth, the svg has been generated by gRaphael. If you need more details, I'll be pleased to provide it.

Great library, thanks! Just wanted to report an issue related to text-anchor. The output SVG has the correct value on the text-anchor attribute within the text element, but the style attribute on the same text element always has 'text-anchor: middle'.

For example:
<text transform="matrix(1,0,0,1,0,0)" style="text-anchor: middle; font: normal normal bold 20px/normal Arial;" x="160" y="10" text-anchor="start"

In the version of the library I have here, the problem looks like it might be hard-coded on line 179.

Hi !
When i enter text on free.transform() and exports SVG in the English
lang - the text output is well !

But when i enter another lang (that uses utf-8 / windows-1255 charset)
it turns out as "gibrish" ....

Any suggestions ?

BR,
Hezi.

Hi again,

I'm trying to export paper.text with multiline, and when i exports it
so SVG it comes out as one line,

Do you have any idea how to fix it ?

I appreciate all your help,

BR,
hez

I don't know whether is a problem. It occurs on the row 143. It sets the text-anchor as middle in the inline style property, and then it will override the text-anchor property defined by users.

I've been using this lib along with canvg to go from Rapahel paper, to SVG, to canvas, to DataURL and in turn have an image definition of the way elements were arranged on the Raphael paper.

I just tested going from the version of Raphael.export version that was current around Feb 2013 to the one that is current now in May 2014, I notice elements are either not positioned the same - either way the layout appears now with the elements all moved from their translated position.

I can flip back and forth between the older version and current and I see this changing. Are there some node attributes or some other settings I need to have in place in the current version of the library now that wasn't there before?

It is as if the translations of the elements from their original entry point are getting removed because it is as if components in the current export are at the original entry points.

Here are examples - I pull these components into the paper and drag them to the corners as you see in the "older" example. The "current" example is approximately where they are when they are first dropped into the paper. In each example however the component is in the corner before the toSVG - the jpeg after the toSVG shows very different results.

Older https://dl.dropboxusercontent.com/u/3648556/assembly_with_older_raphael_export.jpeg
Current
https://dl.dropboxusercontent.com/u/3648556/assembly_with_current_raphael_export.jpeg

Any clue?

Hey,

I have a weird problem and would be very happy if someone could fix it.

I have a rectangle with rx and ry set, but whenever I use Raphael.Export to export it so SVG, it results in rx and ry being 0.

Hi

Im receiving the following error when trying an export

Uncaught TypeError: Object 2 has no method 'split' raphael.export.js: line 128

Thanks

Hi, I've just inherited a project which uses this library, so bare with me.

We have found an issue when adding ampersands, so for instance if my input text is

Joe & Bob's

When looking at the source code of the SVG it is

Joe  &  Bob's

Which creates this double space around the ampersand

please see follow pie chart:
http://code.google.com/p/cartographerjs/source/browse/trunk/js/marks/PieMarker.js?r=4

thanks for your work. :)

Hi,
i am not sure if it is this plugin issue, or my code is wrong.
what i need is to export to svg ma paper and the convert it to jpg.
i have a path with fill:backgournd.jpg and i cannot get it on my jpg after conversion.

my js code to create this path is more or less:

paper.path("M 190 L 190 L 300 L 250 195 z").attr({'stroke-width': 0,'fill': 'url(images/alfen/02/murek.png)'});

after exporting it to svg i can find with firebug that a variable has:

<path transform="matrix(1,0,0,1,0,0)" fill="url(images/alfen/02/murek.png)" stroke="#000" d="M10,175.65181518151815L948,175.65181518151815L948,195L10,195Z" stroke-width="0"></path>

and my php code for converting is:

<?php 
$json = $_POST["json"];
$output = str_replace('\"','"',$json);
$filenameSVG = 'test';
file_put_contents( $filenameSVG . '.svg', $output);
$konwert = 'convert ' . $filenameSVG .'.svg ' . $filenameSVG .'.jpg';
system($konwert);
?>

but i cannot get it working correctly. i mean, that all svg is converted good, except background for this path.

hope you can help...

thanks

gerard

row num is 106
font-size: ' + style.font.size + 'px'

Hi Elbert,

I was able to convert Charts SVG code to PDF. But if we have a scenario like charts with legends then legends in web page are displaying in black and white mode.Just like the earlier issue with charts(Black and white).Then it is causing problems in generating the PDF as well.

Example code :

r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2],{legend :["one","two","three","four","five","six", "seven"], legendpos: "west"});

Thanks in Advance,

Regards,
Sudheer

Before calling Paper.toSVG()

<tspan dy="4">Test
</tspan>

After

<tspan dy="NaN">Test
</tspan>

What am i missing?

when change to svg , path's arrow get lost

Hey,

I don't know yet why this is happening, but after the export of my Raphael paper as SVG, the stroke-width attribute of all my paths is completely wrong.
I think it could have to do with the escapeXML() method somehow, but I need to investigate further.

Just specifying "paper.text(x,y).attr('text');" does not create a font attribute, which Raphael.export requires on line 118.

Please update to say "family: typeof node.attrs.font === 'undefined' ? null : node.attrs.font.replace(/^.?"(\w+)".$/, '$1'),"

The scope of the line variable isn't proper when we invoke computeTSpanDy(), so my multi-line text boxes emerge with dy the same for each line.
My functional js-fu is not up to submitting a correct patch, but you can see where I put in a GLOBAL_LINE to move my project along.
Other than that, this module is an epic win, and I thank you for it.

var serializer = {
    'text': function(node) {
        style       = extractStyle(node);
        var tags    = new Array;
                    GLOBAL_LINE = -1;
        map(node.attrs['text'].split('\n'), function(text, iterable, line) {
                            line         = line || 0;
                            GLOBAL_LINE += 1;
            tags.push(tag(
                'text',
                reduce(
                    node.attrs,
                    function(initial, value, name) {
                        if ( name !== 'text' && name !== 'w' && name !== 'h' ) {
                            if ( name === 'font-size') value = value + 'px';

                            initial[name] = escapeXML(value.toString());
                        }
                        return initial;
                    },
                    { style: 'text-anchor: middle; ' + styleToString(style) + ';' }
                    ),
                node.matrix,
                tag('tspan', { dy: computeTSpanDy(style.font.size, GLOBAL_LINE + line + 1, node.attrs['text'].split('\n').length) }, null, text)
            ));
        });
        return tags;

Text elements that include special charaters are being incorrectly exported. For instance, when I have text elements with the text <trigger>, the generated SVG is

<text transform="matrix(1,0,0,1,0,0)" style="text-anchor: end; font: normal normal normal 10px/normal Arial;" x="161" y="31.5" text-anchor="end" font="10px &quot;Arial&quot;" stroke="none" fill="#000"><tspan dy="3.634615384615385"><trigger></tspan></text>

That <trigger> tag is parsed as a regular SVG tag, and isn't displayed in the resulting SVG image.

In the 'text' serializer, line 209, I've replaced

tags.push(tag(
    'text',
    attrs,
    node.matrix,
    tag('tspan', {
        dy: computeTSpanDy(style.font.size, line + 1, totalLines)
    }, null, text.replace(/&/g, "&"))
));

with

tags.push(tag(
    'text',
    attrs,
    node.matrix,
    tag('tspan', {
        dy: computeTSpanDy(style.font.size, line + 1, totalLines)
    }, null, escapeXML(text.replace(/&/g, "&")))
));

and that seems to do the trick, thus far.

Hi,

Thanks for your great work on Raphael.Export.

Here I'am doing some R&D on pure JS chart libraries(without flash) which is supporting export functionality. I would like to export charts to Image/PDF and it should support older browsers like IE7/IE8 along with modern browsers.Some of other popular JS libraries like JQplot providing the export functionality but they fall back in older browers like IE7/IE8. Here the problem is Canvas URL always empty in IE8 (canvas.toDataURL('image')).

Now I'am trying with Raphael charts and I got this Raphael Export plugin to convert the charts into SVG format.But the chart is only displaying in black&white color in the web page (No other colors).Also When I'am converting the SVG Code to PDF format (using online coverters like http://www.fileformat.info/convert/image/svg2pdf.htm) there is no image at all.

Could you please suggest the possibility with Raphael.Export or any other alternatives?

Thanks in Advance.

Regards,
Sudheer

Hello,

You say it also works in browsers that does support SVG. I wonder how you could even make Raphael work in a browser that does not support SVG so that you could export it. Before export at least Raphael needs to work (not necessarily draw anything) so that one can export SVG with your utility function.

I would like to use Raphael on Android phones whose browser does not support SVG. I can draw SVG using canvg but I could not make Raphael even go further than var paper = Raphael('drawingArea');.

I appreciate your advise.

Thanks.

I am getting JavaScript errors in IE8 due to the 'class' attribute ending up undefined in the 'text' callback for the serializer object.

On line 205, the code is populating the 'class' attribute by checking node.node.className.baseVal, however on IE8 this is undefined. This then results in a JavaScript error when escapeXML() attempts to handle this undefined value as a string.

I am going to commit a PR to fix the fact that escapeXML() breaks when it receives an undefined value, but I am also logging this ticket as I think that fix will just be sticking-plaster over the real problem, which is that handling of classes appears to be not working correctly in IE8.

(Note that I haven't checked other IE versions, so this problem may not be confined to IE8.)

Hey, maintainer(s) of ElbertF/Raphael.Export!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library ElbertF/Raphael.Export is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "ElbertF/Raphael.Export",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Thanks for this excellent library. One issue I found is when
I have a gradient fill on a path element as it gets set as fill="none" in the svg. It works ok for a rect element.

t = paper.path("M 10 10 l 100 0 l 0 100 l -100 0 z");
t.attr({
        fill: '90-#FF6c7a-#64a0c1'
   });

give this svg
<path transform="matrix(1,0,0,1,0,0)" fill="none" stroke="#000" d="M10,10L110,10L110,110L10,110Z" gradient="90-#FF6c7a-#64a0c1"></path>

• see the fill="none", and a resulting view in a browser is empty.

where as for a rect some defs for the linear gradient are created and looks fine viewed in the browser:

    var myrect = paper.rect(360,20,100,100);
    myrect.attr({
        fill: '90-#FF6c7a-#64a0c1'
    });

gives
<defs> <linearGradient id="lineargradient86z4n" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"><stop stop-color="#ff6c7a" offset="0%"/><stop stop-color="#64a0c1" offset="100%"/> </linearGradient></defs><rect transform="matrix(1,0,0,1,0,0)" x="360" y="20" width="100" height="100" rx="0" ry="0" stroke="#000" fill="url(#lineargradient86z4n)"></rect>
give

Occasionally I would get cases where calling toSVG() would cause sides on my freeTransform objects to display a very thick edge or two. I made sure they were all unplugged, and in the end directly getting the innerHTML on the div worked more consistently than this did. The easiest to recreate case was overlapping freeTransform rectangles.

Hi,

I have an element:

zestaw = paper.image("images/alfen/01/zestawLP.png", 0, 0, (4380*oneMm), 1200*oneMm);

and on some action i need to update an image of this element and i do this with:

$('#radioPrawy').bind('change', function() {
                if (this.checked) {
                    zestaw.node.href.baseVal = "images/alfen/01/zestawPP.png";
                };
             });

and in browser it is working great, when i inspect visible element i get:

<image style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); " x="100.01122112211222" y="111.13861386138613" width="306.0940594059406" height="83.86138613861387" preserveAspectRatio="none" href="images/alfen/01/zestawPP.png"></image>

but when i use toSVG function and i put a result to console i get:

<image transform="matrix(1,0,0,1,0,0)" preserveAspectRatio="none" x="100.01122112211222" y="111.13861386138613" width="306.0940594059406" height="83.86138613861387" xlink:href="images/alfen/01/zestawLP.png"></image>

so i cannot process this value to pdf, because i still have original image.
how can I fix it?

Hello,
thanks for this great library! I was successful with several drawings. Unfortunately, I'm stuck with a circle, having a radial gradient as in the following example. Please help. Thanks!

var paper = Raphael( "foo-container", 100, 100 );
var circle = paper.circle(150, 40, 30).attr('fill', 'r(0.25, 0.5)#000-#fff');
var svgString = paper.toSVG();
document.getElementById('bar-container').innerHTML = svgString;

I get this error when doing a simple paper.export(). I tried it on both Raphael.js 2.0 and 2.01.

The problem goes away when I change line 14 from:
for ( var node = paper.bottom; node != null; node = node.next ) {
to
for ( var node = this.bottom; node != null; node = node.next ) {

Nice project!

Using the code from the commit prior to #39 the radius appears in the svg output, but does not appear in the svg output using the code from pull request #39.

My Test Code:

var R = Raphael(50, 50, 400, 400);
var circle = R.circle(100, 100, 50).attr('fill', '#f00');
var svg = R.toSVG();
console.log(svg);

SVG output before #39:

<svg style="overflow: hidden; position: relative;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" version="1.1" height="400"><circle transform="matrix(1,0,0,1,0,0)" cx="100" cy="100" r="50" fill="#f00" stroke="#000"></circle></svg> 

SVG output after #39:

<svg style="overflow: hidden; position: relative;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" version="1.1" height="400"><circle transform="matrix(1,0,0,1,0,0)" cx="100" cy="100" fill="#f00" stroke="#000"></circle></svg> 

I am creating connections with arrow heads between the rectangles using graffle(http://raphaeljs.com/graffle.html) but when i try to export the svg the connections between the rectangles do appear but the arrow-heads doesn't .
I have created a fiddle for your ref:- http://jsfiddle.net/nHEsE/10/
Please let me know if you want more clarifications.

Thanks

I use raphael js with freeTransform plugin And Raphael.Export

I have an issue when exporting text of some specific fonts (ex : talkiesregular ) , there is an offset between element in the raphael context and the exported svg

the matrix transformation has changed for some reason , and the result if an offset depending on rotation/scale amounts.

raphael js matrix :

(4.4314,-0.0578,0.0371,2.8414,-806.1046,-534.9045

exported matrix :

4.5777,0.2246,-0.1777,3.6223,-749.9894,-782.7069

any ideas why or workaround ?

I tried to edit around line 257 with :

svg += '<' + node.type + ' transform="matrix(' + node.matrix.toTransformString() + ')"' + attrs + '></' + node.type + '>';

but the problem is the same.

Stroke dash array attribute is different in raphael.js from normal svg.
In raphael js it is one of the following array [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”] . But in normal svg it is a list of comma and/or white space separated s and s that specify the lengths of alternating dashes and gaps.

Refer : http://raphaeljs.com/reference.html#Element.attr
and https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

so if we export svg it will not be correct in stroke dash array.

I suggest add the following case in switch present in 'tag' function (after line 102)

case 'stroke-dasharray':
var sw = attrs['stroke-width'] !== undefined ? attrs['stroke-width'] : 1 ;
switch(element){
case "" :
element = "0";
break;
case "-" :
element = (3_sw)+","+sw;
break;
case "." :
element = sw+","+sw;
break;
case "-." :
element = (3_sw)+","+sw+","+sw+","+sw;
break;
case "-.." :
element = (3_sw)+","+sw+","+sw+","+sw+","+sw+","+sw;
break;
case ". " :
element = sw+","+(3_sw);
break;
case "- " :
element = (4_sw)+","+(3_sw);
break;
case "--" :
element = (8_sw)+","+(3_sw);
break;
case "- ." :
element = (4_sw)+","+(3_sw)+","+sw+","+(3_sw);
break;
case "--." :
element = (8_sw)+","+(3_sw)+","+sw+","+(3_sw);
break;
case "--.." :
element = (8_sw)+","+(3_sw)+","+sw+","+(3_sw)+","+sw+","+(3_sw);
break;
}