1

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.

2
  • El path tendría que tener como fill el gradiente. En el código tiene un azul claro como fill. Además sería interesante ver el gradiente.
    – enxaneta
    Commented el 9 may. 2019 a las 21:45
  • No quiero que el path tenga el gradiente, el path debe tener ese azul claro. Añado donde tengo el gradiente y donde hago una referencia hacia el. Graciss per s'ajuda.
    – User1
    Commented el 10 may. 2019 a las 7:24

1 respuesta 1

0

El formato que tienes en tu SVG es incorrecto y por eso no lo puedes en (casi) ningún sitio. Prueba a hacerlo de nuevo, porque es muy probable que contenga errores.

1
  • Arreglarlos a mano no es una tarea trivial. Lo recomendable es que lo hagas de nuevo, dudo que te cueste más trabajo que intentar una implementación de un posible convertidor usando Java. Commented el 9 may. 2019 a las 9:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.