Làm cách nào để chia tỷ lệ SVG có một số định nghĩa đường dẫn phức tạp?

Tôi có một SVG mà mã cũng giống như những gì sau:Làm cách nào để chia tỷ lệ SVG có một số định nghĩa đường dẫn phức tạp?

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

Các kích thước "gốc" của SVG tạo ra một hình ảnh là đó là 300px x 310px. Tôi muốn chia tỷ lệ cho toàn bộ hình ảnh, giả sử 50%. Tôi đã thử nhiều cách để chia tỷ lệ hình ảnh, nhưng tốt nhất tôi đã thực hiện là chỉ cần cắt hoặc "cắt" hình ảnh gốc thành một khu vực bằng 50% kích thước ban đầu.

Sử dụng bảo lưuKiểm traRatio, đặt chế độ xem, cố gắng sử dụng transform = "scale (0.5"), v.v ... đã không hoạt động. Tất cả những gì tôi muốn làm là mở rộng kích thước ban đầu lên 50%.

Nguồn

2012-04-29 nhuff717

transform="scale(0.5)" chắc chắn sẽ hoạt động. Có lẽ bạn đang làm điều gì đó sai.

Hãy thử gói g11 trong một g với transform="scale(0.5)" và loại bỏ các preserveAspectRatio và viewBox

Nguồn

2012-04-30 10:51:52 mihai

Nhưng vấn đề với quy mô xuống với CSS biến đổi là đối tượng vẫn có kích thước ban đầu của nó (mặc dù trông nhỏ hơn), do đó bố cục không đẹp ... ít nhất đó là trải nghiệm của tôi với nó. – Deigote

Dưới đây là một ví dụ về cách tôi đang làm nó

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

Nguồn

2014-06-13 09:00:33 Peter

Làm cách nào để chia tỷ lệ SVG có một số định nghĩa đường dẫn phức tạp?

Trả lời

Các vấn đề liên quan