Tenia un .svg
, lo cambie y le puse un gradiente.
Después lo convertí a un .png
, pero el gradiente no está en el nuevo .png
.
He intentado convertir el .svg
a .png
con un convertidor de internet pero aún así el gradiente no se pasa.
Cuando abro el .svg
con Illustrator
no puedo ver el gradiente. En la previsualización del .svg
puedo ver el gradiente.
Me da este error:
org.apache.batik.bridge.BridgeException El atributo 'd' del elemento <path> es invalido.
Mi pregunta es:
Si alguien se ha encontrado con este o otro error similar, o tiene alguna idea de como arreglarlo, podrías darme algún consejo sobre como arreglarlo?
Mi convertidor:
public void svgToPng() throws MalformedURLException {
String svg= "/Users/userName/svg/";
File folder = new File(svg);
for (File fileEntry : folder.listFiles()) {
String[] codigoAux = fileEntry.getName().split("\\.");
if (codigoAux[0].isEmpty()) {
LOGGER.debug("Name of file is empty");
} else {
try {
PNGTranscoder transcoder = new PNGTranscoder();
String svgURI = fileEntry.toURI().toURL().toString();
TranscoderInput input = new TranscoderInput(svgURI);
String outputPath = "/Users/userName/png/";
OutputStream ostream = new FileOutputStream(outputPath + codigoAux[0] + ".png");
TranscoderOutput output = new TranscoderOutput(ostream);
transcoder.transcode(input, output);
ostream.flush();
ostream.close();
}catch (TranscoderException ex) {
LOGGER.error(ex);
} catch (IOException ex) {
LOGGER.error(ex);
}
}
}
}
Y aquí está mi elemento path:
<path fill="#D1E9FD" d="M7095.36-13.684c800.463,818.206,1299.013,1969.505,1299.013,3244.739 c0,633.732-123.293,1236.744-345.429,1783.602H305.852C83.733,4467.799-39.558,3864.79-39.558,3231.055 c0-1275.234,498.537-2426.534,1299.021-3244.739H7095.36z"></path>
Y mi elemento style:
<style> #Countries path, #Countries polygon { fill: url(#grad1); filter: url(#dropshadow); } </style>
Y mi elemento linearGradient:
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#FFE69C;stop-opacity:1"></stop>
</linearGradient>
El resultado esperado es un png con el gradiente.