Fix: idPrefix regex to support style attr

Currently createIdPrefix for tag attributes only works
if the url is the first value.

e.g: <path mask="url(#foo")>

This commit adds support also for the following.

<g style="mask: url(#foo)">

Author: koox00

lib/transformer.js

@@ -131,7 +131,7 @@ function createClassPrefix(classPrefix) {
 }
 
 function createIdPrefix(idPrefix) {
-    var url_pattern = /^url\(#.+\)$/i;
+    var url_pattern = /url\(#.+?\)/i;
     return function prefixIds(tag) {
         var idIdx = getAttributeIndex(tag, 'id');
         if (idIdx !== -1) {
@@ -150,10 +150,17 @@ function createIdPrefix(idPrefix) {
         if (tag.attributes && tag.attributes.length > 0) {
             // replace instances of url(#foo) in attributes
             tag.attributes.forEach(function (attr) {
-                if (attr[1].match(url_pattern)) {
+                var attrValue = attr[1].match(url_pattern);
+                if (attrValue) {
                     attr[1] = attr[1].replace(url_pattern, function (match) {
-                        var id = match.substring(5, match.length -1);
-                        return "url(#" + idPrefix + id + ")";
+                        var index = attr[1].indexOf(attrValue[0]);
+                        var id = match.substring(5, match.length - 1)
+                        return (
+                            attr[1].slice(index, index + 5) +
+                            idPrefix +
+                            id +
+                            attr[1].slice(index + 5 + id.length)
+                        )
                     });
                 }
 

tests/fixtures/with-ids.svg

@@ -56,12 +56,13 @@ describe('getExtractedSVG()', function(){
         var svgWithStyle = require('raw!./fixtures/with-ids.svg');
         var processedStyleInsertedSVG = SVGInlineLoader.getExtractedSVG(svgWithStyle, { idPrefix: 'test.prefix-' });
 
+      console.log(processedStyleInsertedSVG)
 
-        assert.isTrue( processedStyleInsertedSVG.match(/test\.prefix-foo/g).length === 3 );
+        assert.isTrue( processedStyleInsertedSVG.match(/test\.prefix-foo/g).length === 4 );
         // // replaces xlink:href=
         assert.isTrue( processedStyleInsertedSVG.match(/xlink:href=/g).length === 1 );
         // // replaces url(#foo)
-        assert.isTrue( processedStyleInsertedSVG.match(/url\(#test\.prefix-foo\)/g).length === 1 );
+        assert.isTrue( processedStyleInsertedSVG.match(/url\(#test\.prefix-foo\)/g).length === 2 );
     });
 
     it('should be able to specify tags to be removed by `removingTags` option', function () {