¿Cómo escalo un SVG que tiene algunas definiciones de ruta complejas?

que tienen un SVG cuyo código es como lo que sigue:¿Cómo escalo un SVG que tiene algunas definiciones de ruta complejas?

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="150px" height="150px" preserveAspectRatio="xMinYMin meet" viewBox="0 0 150 155" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <g id="g11" transform="matrix(1.25,0,0,-1.25,-100.0791,954.14501)"> 
     <g id="g3186" transform="translate(6.3490095,-13.703287)"> 
      <path d="..."></path> 
      <path d="..."></path> 
      <path d="..."></path> 
      <path d="..."></path> 
     </g> 
    </g> 
</svg>

Las dimensiones "originales" del SVG generan una imagen es que es de 300 por 310px. Quiero escalar la imagen como un todo, digamos un 50%. He intentado una variedad de formas de escalar la imagen, pero lo mejor que he logrado es simplemente recortar o "recortar" la imagen original en una región que es el 50% de las dimensiones originales.

Utilizando preserveAspectRatio, configurar viewbox, tratando de usar transform = "scale (0.5"), etc. no funcionó. Todo lo que quiero hacer es escalar las dimensiones originales en un 50%.

Fuente

2012-04-29 nhuff717

transform="scale(0.5)" definitivamente debería funcionar. Probablemente estés haciendo algo mal.

trate de envolver g11 en otro g con transform="scale(0.5)" y retire la preserveAspectRatio y viewBox

Fuente

2012-04-30 10:51:52 mihai

Pero el problema con la escala hacia abajo con las transformaciones CSS es que el objeto todavía tiene su tamaño original (a pesar de parecer más pequeño), por lo que el diseño no se ve bien ... al menos esa es mi experiencia con él. – Deigote

Aquí está un ejemplo de cómo lo estoy haciendo

<!DOCTYPE html> 
    <meta charset="utf-8"> 
    <html> 
    <head> 
     <script src="http://d3js.org/d3.v3.min.js"></script> 
    </head> 
    <body> 
    <!-- this came from Open Clip Art http://openclipart.org/tags/svg 
     I just took the bits inside the g tag and gave them an id --> 
    <svg xmlns:xlink="http://www.w3.org/1999/xlink" > 
     <defs> 
      <g id="factory2"> 
       <g id="layer1" transform="translate(-190.12 -497.04)"> 
        <path id="path3019" d="m260.18 638.49c-12.375-0.3028-33.202-0.51166- 46.283-0.46413l-23.783 0.0864 0.54057-2.5363c0.29731-1.3949 0.72336-10.785 0.94678-20.867 0.22343-10.082 0.61582-18.541 0.87198-18.797 0.6619-0.66189 5.5186 2.3677 12.539 7.8218l6.0422 4.6941 2.6179-4.6941c1.4398-2.5818 3.2323-5.8073 3.9833-7.1678 0.75098-1.3605 1.8059-2.6205 2.3442-2.7999 0.53833-0.17944 3.4031 1.6087 6.3662 3.9737 14.183 11.32 13.44 10.876 15.062 9.0051 0.81257-0.93784 2.5493-4.5177 3.8593-7.9552 1.3101-3.4375 2.6092-6.2494 2.887-6.2486 0.2778 0.00077 4.2211 3.6008 8.7629 8s8.6861 7.9986 9.2095 7.9986c1.661 0 5.5112-4.8335 7.5569-9.4868 1.0867-2.4718 2.2704-4.4985 2.6305-4.5037 0.36009-0.005 4.9112 4.2194 10.114 9.3881l9.4588 9.3976-0.36231 12.268c-0.19928 6.7473-0.57659 12.482-0.83847 12.744-0.71531 0.7153-9.6348 0.75231-34.526 0.14325zm-53.812-3.6334c-0.72187-0.28887-1.5844-0.25335-1.9167 0.0789-0.33229 0.33229 0.25834 0.56864 1.3125 0.52522 1.165-0.048 1.4019-0.28494 0.60417-0.60416zm52.618-13.034c0.27612-3.8066 0.0559-4.2797-2.2628-4.8616-1.4128-0.35458-4.5879-0.34189-7.0559 0.0282-4.4272 0.66389-4.4872 0.72466-4.4872 4.5421 0 4.3193 0.69024 4.6694 9 4.5649l4.5-0.0566 0.30588-4.2169zm-34.556 2.4532c-0.1375-0.40496-0.25-2.3113-0.25-4.2363v-3.5h-13v7.8954l5.25 0.37628c6.7165 0.48138 8.3091 0.37478 8-0.53546zm17.25-3.2363v-4l-6.75-0.29569-6.75-0.29569v3.879c0 2.1335 0.31903 4.1981 0.70896 4.588 0.38993 0.38992 3.4274 0.57742 6.75 0.41666l6.041-0.29229v-4zm32.5 0.5v-4h-12v8h12v-4zm16.267 0.75c0.27194-1.7875 0.29645-3.5875 0.0545-4-0.24197-0.4125-3.3384-0.75-6.8809-0.75h-6.441v8h12.773l0.49443-3.25zm-82.457-1.5-0.31037-3.75h-5.7837c-4.0517 0-6.0685-0.44918-6.7347-1.5-0.67184-1.0597-0.95549 0.0411-0.96631 3.75l-0.0153 5.25h14.121l-0.31036-3.75zm13.69-19.25c-0.33992-0.55-1.068-1-1.618-1s-0.72189 0.45-0.38197 1 1.068 1 1.618 1 0.72189-0.45 0.38197-1zm-13.665-0.75c-1.26-1.4949-1.4649-9.1853-1.405-52.75l0.0701-51 3.3219 0.15527c1.8271 0.0854 3.5772 0.4105 3.8891 0.72245 0.31195 0.31195 0.73146 10.142 0.93225 21.845 0.2008 11.703 0.79871 30.278 1.3287 41.278 1.2527 26.001 0.96626 31.906-1.8072 37.25-2.3841 4.5942-4.0201 5.2403-6.33 2.5zm27.665-1.9051c-1.1986-2.8686-1.388-5.8273-0.88023-13.75 0.35583-5.5522 0.69953-20.895 0.76378-34.095 0.12983-26.675 0.48916-28.507 4.9502-25.245 1.5369 1.1238 1.7803 4.6464 2.3358 33.807 0.55628 29.202 0.44258 33.086-1.1049 37.745-2.0404 6.1432-3.9393 6.6248-6.0646 1.5383z"/> 
       </g> 
      </g> 
     </defs> 
    </svg> 

    <script type="text/javascript"> 
     var svg = d3.select("svg") .append("g"); 

     var nodes = [{ name: "1", type: 'factory2' }]; 

     var node = svg.selectAll("node") 
       .data(nodes) 
       .enter() 
       .append("g") 
       .attr({ 
        dx:50, dy:50, width:50, height:50, 
        // here's the magic 
        transform:"scale(0.5)" 
       }); 

     node.append("use") 
       .attr({ 
        "xlink:href": "#factory2" 
       }); 

    </script> 
    </body> 
    </html>

Fuente

2014-06-13 09:00:33 Peter

¿Cómo escalo un SVG que tiene algunas definiciones de ruta complejas?

Respuesta

Cuestiones relacionadas