¿Cómo dividir un archivo SVG con docenas de elementos g en docenas de archivos SVG?

Tengo un archivo SVG que tiene, digamos, 10 g de elementos que no comienzan en (0,0). Por ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="528px"
     height="240px" viewBox="0 0 528 240" enable-background="new 0 0 528 240" xml:space="preserve">
<g id="CONTAINER">
    <g id="collapse-top">
        <path id="collapse_x5F_top" fill="#1D1D1B" d="M498,206v-3c0-2.2-1.8-4-4-4h-3c-2.2,0-4,1.8-4,4v3c0,2.156,1.781,4,4,4
            c0,0,2,0,3,0C496.172,210,498,208.156,498,206z M496,207c0,0.55-0.45,1-1,1h-5c-0.55,0-1-0.45-1-1v-5c0-0.55,0.45-1,1-1h5
            c0.55,0,1,0.45,1,1V207z M495,206h-5l2.5-3.333L495,206z"/>
    </g>
</g>

¿Cómo puedo dividirlo en 10 archivos SVG diferentes, uno por elemento g, cada uno de los cuales comienza en (0,0)?

Prefiero un enfoque automatizado basado en la línea de comandos para hacer esto, pero también puedo usar Adobe Illustrator.

Respuestas (2)

Hay un par de maneras en las que puedo pensar para hacer esto:

Opción 1: Modificar el datributo en el Objeto

Grado de dificultad: ★★★★☆

Conceptualmente, esto es bastante simple. Los detalles esenciales son el problema. en el <path>objeto dentro de <g>, tienes el datributo. Esto es lo principal que necesita modificar. Lo que deberá hacer es decodificarlo y traducirlo a las coordenadas actualizadas.

Opción 2: agregar un atributo de transformación al objeto

Grado de dificultad: ★★☆☆☆

Si tiene un buen conocimiento de JavaScript, esto es bastante fácil. Puede obtener el cuadro delimitador del gráfico usando getBBox() . Luego puede usar ese rect para agregar un atributo de transformación al objeto, así:

transform = "translate(-100 -100)"

Esto movería el objeto 100 unidades hacia la izquierda y 100 unidades hacia arriba. Usando el ejemplo que proporcionó, agregué el siguiente script:

<script type="application/ecmascript"> <![CDATA[
  var path = document.getElementById("collapse_x5F_top");
  var x = path.getBBox().x;
  var y = path.getBBox().y;

  path.setAttribute("transform", "translate(-" + x + " -" + y + ")");
]]> </script>

Esto mueve el gráfico a la esquina superior derecha de la pantalla.

Demostración en vivo (El ícono rojo es el original, el negro es el objeto transformado)

**Tenga en cuenta que si bien este código funciona para este ejemplo, no es un código sólido que funcione para todos los casos de prueba (por ejemplo, si los valores de x e y no son inicialmente positivos)

Puedo pensar en una manera de hacer esto con Adobe Illustrator

  1. Use la opción "liberar a capas" en el panel de capas para mover cada elemento a su propia capa
  2. Utilice el script de exportación de capa inteligente para exportar cada capa a un nuevo archivo .svg. Si usa la opción de "recortar bordes", todos deberían estar en 0,0.
¿Cómo dividir un archivo SVG con docenas de elementos g en docenas de archivos SVG?
RespuestasAquíPolítica de privacidad1y, 8v