diff --git a/index.js b/index.js index 5e92bfd..ed2bb33 100644 --- a/index.js +++ b/index.js @@ -5,6 +5,24 @@ const fancyLog = require('fancy-log') const PluginError = require('plugin-error') const Vinyl = require('vinyl') +const presentationAttributes = new Set([ + 'style', 'alignment-baseline', 'baseline-shift', 'clip', 'clip-path', + 'clip-rule', 'color', 'color-interpolation', 'color-interpolation-filters', + 'color-profile', 'color-rendering', 'cursor', 'd', 'direction', 'display', + 'dominant-baseline', 'enable-background', 'fill', 'fill-opacity', 'fill-rule', + 'filter', 'flood-color', 'flood-opacity', 'font-family', 'font-size', + 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', + 'font-weight', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', + 'image-rendering', 'kerning', 'letter-spacing', 'lighting-color', + 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'overflow', + 'pointer-events', 'shape-rendering', 'solid-color', 'solid-opacity', + 'stop-color', 'stop-opacity', 'stroke', 'stroke-dasharray', + 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', + 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', + 'text-rendering', 'transform', 'unicode-bidi', 'vector-effect', 'visibility', + 'word-spacing', 'writing-mode' +]); + module.exports = function (config) { config = config || {} @@ -111,7 +129,19 @@ module.exports = function (config) { $defs.remove() } - $symbol.append($svg.contents()) + let $groupWrap = null + for (let [name, value] of Object.entries($svg.attr())) { + if (!presentationAttributes.has(name)) continue; + if (!$groupWrap) $groupWrap = $('') + $groupWrap.attr(name, value) + } + + if ($groupWrap) { + $groupWrap.append($svg.contents()) + $symbol.append($groupWrap) + } else { + $symbol.append($svg.contents()) + } $combinedSvg.append($symbol) cb() } diff --git a/test.js b/test.js index d5138ea..e7d89d6 100644 --- a/test.js +++ b/test.js @@ -287,6 +287,30 @@ describe('gulp-svgstore unit test', () => { stream.end() }) + it('should transfer svg presentation attributes to a wrapping g element', (done) => { + const stream = svgstore({ inlineSvg: true }) + const attrs = 'stroke="currentColor" stroke-width="2" stroke-linecap="round" style="fill:#0000"'; + + stream.on('data', (file) => { + assert.strictEqual( + '' + + ``, + file.contents.toString() + ) + done() + }) + + stream.write(new Vinyl({ + contents: Buffer.from( + `` + + '' + ) + , path: 'rect.svg' + })) + + stream.end() + }) + it('Warn about duplicate namespace value under different name', (done) => { const stream = svgstore()