Jak przeskalować SVG, który ma niektóre złożone definicje ścieżek?

mam SVG, którego kod jest podobny, co następuje:Jak przeskalować SVG, który ma niektóre złożone definicje ścieżek?

<!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>

„oryginał” wymiary SVG generowania obrazu jest to, że jest 300px przez 310px. Chcę skalować obraz jako całość, powiedzmy o 50%. Próbowałem różnych sposobów skalowania obrazu, ale najlepsze, co udało mi się zrobić, to po prostu przyciąć lub "przyciąć" oryginalny obraz do regionu, który stanowi 50% oryginalnych wymiarów.

Użycie opcji preserveAspectRatio, ustawienie widoku, próba użycia transform = "scale (0.5") itd. Nie zadziałały. Wszystko, co chcę zrobić, to skalować oryginalne wymiary o 50%.

Źródło

2012-04-29 nhuff717

transform="scale(0.5)" zdecydowanie powinien zadziałać. Prawdopodobnie robisz coś złego.

Spróbuj zawijania g11 w inny g z transform="scale(0.5)" i usunąć preserveAspectRatio i viewBox

Źródło

2012-04-30 10:51:52 mihai

Ale problem ze skalą w dół z CSS jest to, że przekształca obiekt ma nadal swój pierwotny rozmiar (mimo że wygląda na mniejszy), więc układ nie wygląda dobrze ... przynajmniej to jest moje doświadczenie z nim. – Deigote

Oto przykład tego, jak ja to robię

<!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>

Źródło

2014-06-13 09:00:33 Peter

Jak przeskalować SVG, który ma niektóre złożone definicje ścieżek?

Odpowiedz

Powiązane problemy