Radial gradient type error
Istenes opened this issue · 16 comments
Hello,
It seems that there aren't any support for radial gradients? When I try to import I get this error message in chrome: "SVG Import got unexpected type radialgradient". Linear gradients seems to work.
Is this a bug or isn't this featured yet?
Hi,
That might have something todo with the all lowercase characters. <radialGradient> exists but <radialgradient> doesn't.
Yeah, I also suspected that to be the case (no pun intended), but as you can see in our SVG it uses the correct case:
<g>
<radialGradient id="SVGID_86_" cx="1007.6206" cy="366.8086" r="8.6923" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="0.006" style="stop-color:#FBFDFE"/>
<stop offset="0.0849" style="stop-color:#D1E8EE"/>
<stop offset="0.1697" style="stop-color:#ABD5DF"/>
<stop offset="0.2604" style="stop-color:#8CC5D4"/>
<stop offset="0.3583" style="stop-color:#72B8CA"/>
<stop offset="0.4661" style="stop-color:#5EAEC2"/>
<stop offset="0.5889" style="stop-color:#50A7BD"/>
<stop offset="0.7396" style="stop-color:#47A3BA"/>
<stop offset="1" style="stop-color:#45A2B9"/>
</radialGradient>
<circle fill="url(#SVGID_86_)" cx="1010.065" cy="371.698" r="8.692"/>
<circle fill="#FFFFDF" cx="1012.44" cy="374.014" r="5.136"/>
</g>Strange indeed. I am not quite sure as to why node names would be lowercased. But to be honest, I haven't tested this plugin with gradients. I'll have to implement this properly when I have some spare time.
Small other detail though, gradients are supposed to be located in the <defs> according to the SVG spec.
I'll see if I find something obvious, it's been working great until we put in the gradients. Thansk for the tips, we export our svg using illustrator, I'll check with the guy who exported it if there more options.
Cheers!
Ah, of course, Illustrator puts them allover the place :)
Inkscape is ugly and horrible to work with but exports better plain SVG. I've had a look and it shouldn't be to hard to implement this. I'll have a look at it right now and let you know if it is achievable.
This explains the lower case:
/* get node type */
type = child.nodeName.toLowerCase()After that you have a switch to check which type it is, as 'radialgradient' isn't defined as a type the default case sends this as an console.log error.
Agreed on the Inkscape part, I tried that one aswell but it didn't seem to matter.
Yeah, just caught up on that as well. Strange enough that piece of code was removed a while ago...
Just checked, I need more time to implement this it properly. As it turns our illustrator defines the stop offset in floats while svg.js defines it in %. Unfortunately I am extremely busy at the moment to finalise the job properly.
Oh ok, so if we try to export them as % "should" do the trick? Or do we need to add another case to the switch for this?
No worries, glad you could help this much :)
I published the changes, so if you change the gradient values to %-based values (0.5 -> 50%) they should work properly. You can test with this svg data:
<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="67.9341" y1="104.4355" x2="192.3232" y2="104.4355"><stop offset="0%" style="stop-color:#FFFFFF"/><stop offset="100%" style="stop-color:#000000"/></linearGradient><polygon fill="url(#SVGID_1_)" points="130.129,42.573 136.634,74.533 155.573,47.987 148.51,79.815 176.605,63.269 157.209,89.487 189.606,85.787 161.226,101.854 192.323,111.656 159.873,114.777 184.29,136.39 153.367,126.042 166.892,155.72 142.846,133.682 143.129,166.298 130.129,136.39 117.129,166.298 117.413,133.682 93.367,155.72 106.891,126.042 75.968,136.39 100.386,114.777 67.934,111.656 99.032,101.854 70.652,85.787 103.048,89.487 83.652,63.269 111.749,79.815 104.686,47.987 123.624,74.533 "/><radialGradient id="SVGID_2_" cx="224.1289" cy="262.4355" r="62.0285" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color:#FFFFFF"/><stop offset="100%" style="stop-color:#FF0000"/></radialGradient><polygon fill="url(#SVGID_2_)" points="224.129,200.573 230.634,232.533 249.573,205.987 242.51,237.815 270.605,221.269 251.209,247.487 283.606,243.787 255.226,259.854 286.323,269.656 253.873,272.777 278.29,294.39 247.367,284.041 260.892,313.72 236.846,291.682 237.129,324.298 224.129,294.39 211.129,324.298 211.413,291.682 187.367,313.72 200.891,284.041 169.968,294.39 194.386,272.777 161.934,269.656 193.032,259.854 164.652,243.787 197.048,247.487 177.652,221.269 205.749,237.815 198.686,205.987 217.624,232.533 "/></svg>Here:
Hey,
I pulled your changes, however it seems that all the types are in capital letters now so even the g element gets returned as a type error. I put back your type = type.toLowerCase() and changed radialGradient to radialgradient. Seems to work better, but then I get another error: Uncaught TypeError: Object #<Text> has no method 'getAttribute' svg.import.js:128
See screenshot for details:
That's because your SVG has whitespace in it. You should remove all newlines and space between nodes because they are treated as text nodes. Something like this might work:
var cleanSVG = rawSVG.replace(/\n/g,'').replace(/>\s+/g,'>')I didn't test the regexes but something like that should be sufficient.
works fine after the regexp, no errors, but there don't seem to be any gradients :) just plain color. Do you want my full svg?
That's fine :)
The latest version of svg.js now supports those gradient values from illustrator. In tho old system has been thrown out so it should work as expected.
Good Job!