Cannot read property 'x' of null

[augbog]

For some strange reason I am getting this error Cannot read property 'x' of null when making a sprite for this SVG. However, all my other SVGs that were also made the same way work fine...

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
 viewBox="0 0 100.9 100.9" enable-background="new 0 0 100.9 100.9" xml:space="preserve">
<g>
    <path fill="#FFFFFF" d="M50.4,100.9C22.6,100.9,0,78.3,0,50.4S22.6,0,50.4,0s50.4,22.6,50.4,50.4S78.3,100.9,50.4,100.9z M50.4,4.9
    C25.3,4.9,4.9,25.3,4.9,50.4S25.3,96,50.4,96S96,75.5,96,50.4S75.5,4.9,50.4,4.9z"/>
</g>
<polygon fill="#FFFFFF" points="71.7,49.6 39.4,71.4 39.4,27.8 "/>
</svg>

Here's a jsFiddle. I changed the fill color in the jsFiddle just to make it clearer what it is but originally I wanted it #FFFFFF. It's just a play button made by my friend.

Is anyone able to reproduce the error with this SVG code? I will try to look into the cause of it and report back if I find anything but until then if anyone has advice I would appreciate it.

[phloe]

The SVG looks good to me. I dumped it into a test sprite and it built beautifully.

How does your options look?

[augbog]

Ahh I see strange... Sorry I should have included my options as well.

Here are my options:

"dr-svg-sprites" : {
  test : {
    options :{
      spriteElementPath : "/Users/user/Desktop/assets/SVG/testing",
      spritePath : "/Users/user/Desktop/assets/SVG/sprites",
      cssPath : "/Users/user/Desktop/assets/SVG/sprites/_projects-sprites.scss",
      layout : "packed",
      cssPrefix : "projects-sprite"
    }
  }

I just tested some things and it seems that I can build the SVG sprite all by itself but when I try to add sprites to it, it will fail? Here is another SVG I added to the folder. Not sure if it has something to do with specific SVG files or maybe it is my options?

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<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"
 viewBox="0 0 27 27" enable-background="new 0 0 27 27" xml:space="preserve">
<g>
        <path fill="#999999" d="M13.5,0C20.9,0,27,6.1,27,13.5S20.9,27,13.5,27S0,20.9,0,13.5S6.1,0,13.5,0z M13.5,25.7
    c6.7,0,12.2-5.5,12.2-12.2S20.2,1.3,13.5,1.3S1.3,6.8,1.3,13.5S6.8,25.7,13.5,25.7z"/>
</g>
<polygon fill="#999999" points="13.5,20.3 7.6,9.7 19.4,9.7 "/>
</svg>

And not sure if it helps but

Appreciate all the help!

[phloe]

I'm still not able to recreate the error :(

So I'm just grasping at straws here - but:

• How are your files named?
• What OS are you running? (I tested builds on both Windows 7 and OSX 10.10)
• What exact version of grunt-dr-svg-sprites and dr-svg-sprites are installed?

[augbog]

Okay interesting I made a completely different folder with a fresh npm install of grunt-dr-svg-sprites and it worked fine with just those two. I started adding all my other SVGs and set the layout to packed and it returned the error again.

Then I tried setting it to horizontal and vertical and they both worked! The play-button I have is much larger than the other sprites so I'm not sure if that's causing the issue? Here is a picture of the final result. I set the background-color to black because some of my SVGs are white so it's easier to see the disparity in size.

And to answer your previous questions I'm running OSX 10.10.1 and I'm running "grunt-dr-svg-sprites version ~0.9.15. My files are named play-button.svg and next-button.svg.

EDIT: I just tried using it in my actual project and yeah it works fine if I set it to vertical or horizontal layout!

[phloe]

I don't think the bigger size would be an issue - besides if it's not the size you want ;)

You might be on to something about using the packed layout; maybe it's a buggy behavior in the layout dependency. What version of layout (a dependency to dr-svg-sprites inside the node_modules folder) is installed? (Should be 2.0.0).

[augbog]

Oh hmmm that's possible. Just checked and it seems I am indeed on 2.0.0. From the package.json

  "dependencies": {
    "async": "^0.9.0",
    "handlebars": "^2.0.0",
    "layout": "2.0.0",
    "lodash": "^2.4.1",
    "mkdirp": "^0.5.0",
    "svg2png": "^1.1.0",
    "svgo": "^0.4.5",
    "through2": "^0.6.1",
    "vinyl-fs": "^0.3.0"
  },

However, if you can't recreate the issue, I'm skeptical if this is actually a problem and maybe I just did something wrong? I'll investigate more and look into the layout module to see if that's the culprit. Really appreciate all the help! I'll post back if I find anything. :)

[augbog]

Closing this for now until I can properly recreate the problem consistently.