solving problem with <defs> inside <symbol> for webkit-based browsers #…

…13
leungwensen · Aug 5, 2016 · 7dc9e99 · 7dc9e99
1 parent 164c346
commit 7dc9e99
Show file tree

Hide file tree

Showing 33 changed files with 33 additions and 33 deletions.
diff --git a/dist/sprite/symbol/ant.svg b/dist/sprite/symbol/ant.svg
diff --git a/dist/sprite/symbol/awesome.svg b/dist/sprite/symbol/awesome.svg
diff --git a/dist/sprite/symbol/bootstrap.svg b/dist/sprite/symbol/bootstrap.svg
diff --git a/dist/sprite/symbol/dev.svg b/dist/sprite/symbol/dev.svg
diff --git a/dist/sprite/symbol/elusive.svg b/dist/sprite/symbol/elusive.svg
diff --git a/dist/sprite/symbol/entypo.svg b/dist/sprite/symbol/entypo.svg
diff --git a/dist/sprite/symbol/evil.svg b/dist/sprite/symbol/evil.svg
diff --git a/dist/sprite/symbol/flag.svg b/dist/sprite/symbol/flag.svg
diff --git a/dist/sprite/symbol/flat.svg b/dist/sprite/symbol/flat.svg
diff --git a/dist/sprite/symbol/foundation.svg b/dist/sprite/symbol/foundation.svg
diff --git a/dist/sprite/symbol/geom.svg b/dist/sprite/symbol/geom.svg
diff --git a/dist/sprite/symbol/icomoon.svg b/dist/sprite/symbol/icomoon.svg
diff --git a/dist/sprite/symbol/ionic.svg b/dist/sprite/symbol/ionic.svg
diff --git a/dist/sprite/symbol/logos.svg b/dist/sprite/symbol/logos.svg
diff --git a/dist/sprite/symbol/maki.svg b/dist/sprite/symbol/maki.svg
diff --git a/dist/sprite/symbol/map.svg b/dist/sprite/symbol/map.svg
diff --git a/dist/sprite/symbol/material.svg b/dist/sprite/symbol/material.svg
diff --git a/dist/sprite/symbol/metro.svg b/dist/sprite/symbol/metro.svg
diff --git a/dist/sprite/symbol/mfglabs.svg b/dist/sprite/symbol/mfglabs.svg
diff --git a/dist/sprite/symbol/oct.svg b/dist/sprite/symbol/oct.svg
diff --git a/dist/sprite/symbol/open.svg b/dist/sprite/symbol/open.svg
diff --git a/dist/sprite/symbol/payment-web.svg b/dist/sprite/symbol/payment-web.svg
diff --git a/dist/sprite/symbol/payment.svg b/dist/sprite/symbol/payment.svg
diff --git a/dist/sprite/symbol/simple.svg b/dist/sprite/symbol/simple.svg
diff --git a/dist/sprite/symbol/subway.svg b/dist/sprite/symbol/subway.svg
diff --git a/dist/sprite/symbol/typcn.svg b/dist/sprite/symbol/typcn.svg
diff --git a/dist/sprite/symbol/weather.svg b/dist/sprite/symbol/weather.svg
diff --git a/dist/sprite/symbol/windows.svg b/dist/sprite/symbol/windows.svg
diff --git a/dist/sprite/symbol/zero.svg b/dist/sprite/symbol/zero.svg
diff --git a/dist/sprite/symbol/zocial.svg b/dist/sprite/symbol/zocial.svg
diff --git a/gulp/svg-sprite.js b/gulp/svg-sprite.js
@@ -25,7 +25,7 @@ function reduceAttrs() {
       gutil.log(file.path);
       const doc = domParser.parseFromString(file.contents.toString('utf8'));
       const svgElement = doc.getElementsByTagName('svg')[0];
-      svgElement.setAttribute('style', 'display:none;');
+      svgElement.setAttribute('style', 'width:0;height:0;position:absolute;opacity:0;');
       file.contents = new Buffer(doc.toString());
     } catch (err) {
       this.emit('error', new gutil.PluginError('svg-sprite', err.toString()));

diff --git a/lib/build.js b/lib/build.js
@@ -38,7 +38,7 @@ module.exports = (options) => {
     symbols.push(svg2symbol(svgContent, id));
   });
 
-  const svgSprite = `<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">${symbols.join('')}</svg>`;
+  const svgSprite = `<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;position:absolute;opacity:0;">${symbols.join('')}</svg>`;
 
   fs.writeFileSync(path.join(targetPath, 'svg-symbols.svg'), svgSprite, 'utf8');
   fs.writeFileSync(path.join(targetPath, 'index.html'), template({

diff --git a/src/index.js b/src/index.js
@@ -104,7 +104,7 @@ $('#download').on('click', () => {
       }
       return '';
     });
-    const svgSprite = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none;">${symbols.join('')}</svg>`;
+    const svgSprite = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;position:absolute;opacity:0;">${symbols.join('')}</svg>`;
     const blob = new Blob([
       svgSprite
     ], {