IDs within "url()" aren't made unique

[zeezali]

Hey thanks for this awesome task. It's a real time saver!

So there's just a small issue where IDs within url references don't get handled, which breaks references within the final SVG output.

Here's an example:

    <path fill="url(#b)" d="M20.426 26.117l3.631-1.997c.736-.407.736-1.068 0-1.473l-3.645-2.004-2.73 2.73 2.744 2.744z"/>
    <linearGradient id="b" gradientUnits="userSpaceOnUse" x1="485.463" y1="-496.876" x2="500.38" y2="-492.976" gradientTransform="matrix(.707 .707 -.707 .707 -679.147 21.663)">

When the above is run through grunt-svgstore, the linearGradient ids are all made unique, but url references within fill remain the same. So the gradient wouldn't work in the final SVG.

Here's a really crude fix that I added to my local version of svgstore.js

    // Make fill attributes with ID references unique
    $('[fill]').each(function() {
      var $elem = $(this);
      var fill = $elem.attr('fill');

      // pull out if no url reference specified
      if ( fill.indexOf('url(') < 0 ) return;

      var fillRegex    = fill.match( /\((.*)\)/ );
      var urlReference = fillRegex[1];

      // pull out if not an ID reference
      if  ( urlReference.charAt(0) !== '#' ) return;

      // get the id by name
      var id = urlReference.slice(1, urlReference.length);

      // set the new unique id reference
      $elem.attr('fill', 'url(#'+ uniqueId + id +')');
    });

The above isn't perfect, but it works. It only trawls through elements with fill attributes, but there could be other attributes that contain url(#id) style references. I'm not too sure what they are though.

Hopefully you can add in something like that so that the final SVG output makes ALL IDs unique, rather than just a few.

Cheers

[FWeinb]

Good catch. Will think about a solution for this.

[FWeinb]

Fixed in grunt-svgstore 0.0.4. (with commit 6a99042)
Thanks for reporting.