Gradient doesn't render because nodeName are lowerCase #1

Activity

1. anolek

   changed the title [-]Gradient doesn't render because nodeName are lowerCase[/-] [+]Gradient doesn't render because nodeName are upperCase in HTML5[/+] on Aug 30, 2015
2. anolek

   changed the title [-]Gradient doesn't render because nodeName are upperCase in HTML5[/-] [+]Gradient doesn't render because nodeName are lowerCase[/+] on Aug 30, 2015
3. phaistonian commented on Aug 31, 2015

   

   phaistonian

   on Aug 31, 2015

   Owner

   More actions

   Hey.

   A super minor fix then (06f1833).

   Thank you.
4. anolek commented on Aug 31, 2015

   

   anolek

   on Aug 31, 2015

   Author

   More actions

   Hi !

   Thank you for looking into it. In fact, i already try this fix, it works only if we use XHTML. In HTML (HTML5), all the nodeName are in uppercase, which broke my SVG. I try to find a way to get the nodeName attribute with the correct case, but i didn't find a way.

   So, i use this fix, it's... well ugly, but i'm looking for a better solution :)

               // SVG 1.1 (2nd edition) - List only elements in camelCase
              var fixtures = {
                           "ALTGLYPH": "altGlyph",
                           "ALTGLYPHDEF": "altGlyphDef",
                           "ALTGLYPHITEM": "altGlyphItem",
                           "ANIMATECOLOR": "animateColor",
                           "ANIMATEMOTION": "animateMotion",
                           "ANIMATETRANSFORM": "animateTransform",
                           "CLIPPATH": "clipPath",
                           "FEBLEND": "feBlend",
                           "FECOLORMATRIX": "feColorMatrix",
                           "FECOMPONENTTRANSFER": "feComponentTransfer",
                           "FECOMPOSITE": "feComposite",
                           "FECONVOLVEMATRIX": "feConvolveMatrix",
                           "FEDIFFUSELIGHTING": "feDiffuseLighting",
                           "FEDISPLACEMENTMAP": "feDisplacementMap",
                           "FEDISTANTLIGHT": "feDistantLight",
                           "FEFLOOD": "feFlood",
                           "FEFUNCA": "feFuncA",
                           "FEFUNCB": "feFuncB",
                           "FEFUNCG": "feFuncG",
                           "FEFUNCR": "feFuncR",
                           "FEGAUSSIANBLUR": "feGaussianBlur",
                           "FEIMAGE": "feImage",
                           "FEMERGE": "feMerge",
                           "FEMERGENODE": "feMergeNode",
                           "FEMORPHOLOGY": "feMorphology",
                           "FEOFFSET": "feOffset",
                           "FEPOINTLIGHT": "fePointLight",
                           "FESPECULARLIGHTING": "feSpecularLighting",
                           "FESPOTLIGHT": "feSpotLight",
                           "FETILE": "feTile",
                           "FETURBULENCE": "feTurbulence",
                           "FOREIGNOBJECT": "foreignObject",
                           "GLYPHREF": "glyphRef",
                           "LINEARGRADIENT": "linearGradient",
                           "RADIALGRADIENT": "radialGradient",
                           "TEXTPATH": "textPath"
                       };
   
                       var newNodeName = fixtures[node.nodeName] != null ? fixtures[node.nodeName] : node.nodeName.toLowerCase();
                       var newNode = document.createElementNS('http://www.w3.org/2000/svg', newNodeName);

   Thanks !

   👍React with 👍1Reacted by George Papadakis