-
-
Notifications
You must be signed in to change notification settings - Fork 49
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Preserve svg with styles attribute #208
Comments
@gNesh01 single color seem to be expected behaviour. Also, according to this comment radial gradient might not be supported in the svg sprite |
@gNesh01, with Having said that, I've just tried putting the SVG you referenced into the simple example and the output seems correct to me? Unless you provide a complete minimal reproduction repository (as requested in the ticket template) I don't think there's much any of us can do, other than guessing what the problem might be. |
@cascornelissen, I have already Just one thing please. Thanks |
@gNesh01, I know you have, I was commenting on the fact that this plugin doesn't do any transformations on the contents of the SVG as long as the I've tested it by modifying const SVGSpritemapPlugin = require('../..');
module.exports = {
plugins: [
new SVGSpritemapPlugin('src/sprites/*.svg', {
output: {
svgo: false,
filename: 'sprite.svg'
},
sprite: {
generate: {
title: false,
use: true
}
}
})
]
}; That generates the following <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24"><symbol style="enable-background:new 0 0 24 24;" id="sprite-1" viewBox="0 0 24 24">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#45C5EB;}
.st2{fill:url(#SVGID_1_);}
</style>
<g>
<g>
<path class="st0" d="M9.39,10.97c-0.12,0.29-0.23,0.55-0.35,0.82c-0.22,0.52-0.45,1.05-0.67,1.57c-0.04,0.1-0.09,0.15-0.2,0.14 c-0.13-0.01-0.26-0.01-0.39,0c-0.11,0.01-0.12-0.04-0.08-0.13c0.24-0.55,0.47-1.1,0.71-1.66c0.09-0.21,0.18-0.42,0.27-0.64 c0.03-0.08,0.08-0.12,0.17-0.12C9.03,10.97,9.2,10.97,9.39,10.97z"/>
<path class="st0" d="M6.81,12.41c0.03,0.79,0.36,1.42,1.02,1.87c0.06,0.04,0.14,0.07,0.08,0.17c-0.04,0.08-0.08,0.08-0.14,0.04 c-0.64-0.41-1.03-0.98-1.14-1.73c-0.11-0.74,0.09-1.41,0.59-1.97c0.4-0.46,0.91-0.72,1.52-0.81c0.31-0.04,0.61-0.03,0.92,0.05 c0.04,0.01,0.13-0.02,0.11,0.08c-0.02,0.08-0.05,0.14-0.16,0.12c-0.2-0.05-0.4-0.07-0.61-0.06c-1.05,0.01-2.02,0.88-2.15,1.92 C6.83,12.19,6.81,12.3,6.81,12.41z"/>
<path class="st0" d="M9.08,14.86c-0.19,0-0.35-0.02-0.52-0.06c-0.06-0.01-0.13-0.01-0.09-0.1c0.02-0.06,0.03-0.13,0.15-0.11 c0.37,0.08,0.74,0.06,1.11-0.04c0.83-0.23,1.49-1.01,1.58-1.85c0.1-0.88-0.22-1.58-0.92-2.11c-0.04-0.03-0.08-0.05-0.1-0.09 c-0.03-0.06,0.01-0.12,0.04-0.15c0.04-0.05,0.08,0.01,0.12,0.03c0.64,0.45,1.01,1.06,1.07,1.84c0.11,1.27-0.77,2.37-2.01,2.6 C9.36,14.85,9.21,14.87,9.08,14.86z"/>
<path class="st0" d="M9.73,11.75c0.26,0.6,0.5,1.16,0.75,1.75c-0.21,0-0.4,0-0.6,0c-0.06,0-0.08-0.05-0.09-0.09 c-0.12-0.27-0.23-0.55-0.35-0.82c-0.02-0.05-0.03-0.1,0-0.15C9.52,12.23,9.62,12,9.73,11.75z"/>
<path class="st1" d="M13.24,12.26c0-0.63,0.13-1.23,0.38-1.78c-0.55-0.81-1.61-1.2-2.58-0.82c-0.1,0.04-0.14,0.01-0.19-0.07 c-0.65-1.2-1.94-1.85-3.3-1.69c-1.54,0.19-2.76,1.46-2.87,3c-0.02,0.26-0.02,0.26-0.26,0.28c-1.29,0.14-2.18,1.4-1.88,2.65 c0.24,1.01,1.1,1.71,2.14,1.71c1.5,0,3.01,0,4.51,0c1.51,0,3.02,0,4.53,0c0.29,0,0.56-0.06,0.8-0.18 C13.73,14.57,13.24,13.48,13.24,12.26z"/>
</g>
<radialGradient id="SVGID_1_" cx="78.8536" cy="111.1471" r="6.0932" gradientTransform="matrix(0.2913 0.895 -0.8833 0.2875 91.8604 -92.3137)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFF47C"/>
<stop offset="0.32" style="stop-color:#FFCA05"/>
<stop offset="0.5319" style="stop-color:#FFCA05"/>
<stop offset="0.85" style="stop-color:#F9A51A"/>
<stop offset="1" style="stop-color:#FCB813"/>
</radialGradient>
<path class="st2" d="M21.52,12.27c0,2.13-1.72,3.85-3.85,3.85c-2.13,0-3.85-1.72-3.85-3.85c0-2.13,1.72-3.85,3.85-3.85 C19.79,8.42,21.52,10.15,21.52,12.27z"/>
</g>
</symbol><use x="0" y="0" style="enable-background:new 0 0 24 24;" xlink:href="#sprite-1" width="24" height="24"/></svg> Which when opened in a browser (Firefox, Edge) looks like this on my end. Which matches (other than size which makes sense) with what I see when opening the source SVG in the same browser. But having typed all of this out, this is a bit of a reverse situation because I'm creating the minimal reproduction for you at this point... Be aware that not every maintainer might want to spend so much time on helping everyone out ✌🏼 |
@cascornelissen THANK YOU SO MUCH! |
Hi,
I have following svg HERE with style attr. and radialGradient.
When I generate sprite.svg I lost background colors (and via css "fill" I can set just one color).
This is my setup:
new SVGSpritemapPlugin( './svg/*.svg', { output: { svgo: false, filename: 'sprite.svg' }, sprite: { generate: { title: false } }, } ),
Is there any chance to do that?
Thanks
The text was updated successfully, but these errors were encountered: