複雑なパス定義を持つSVGをどのようにスケールするのですか？

Iは、コードは以下のものに似ているSVG有する：SVGの「元の」寸法は、画像を生成複雑なパス定義を持つSVGをどのようにスケールするのですか？

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

は、それは310pxによって300ピクセルです。全体的に画像の縮尺を変えたいと思っていますが、50％は言いましょう。私は画像の縮尺を変えるさまざまな方法を試しましたが、私が達成した最高のものは元の画像を元の寸法の50％の領域に単にクリップまたは「トリミング」することです。

preserveAspectRatioを使用して、viewboxを設定し、transform = "scale（0.5"）などを使用しようとすると機能しませんでした。私がしたいのは、元の寸法を50％拡大縮小することだけです。

出典

2012-04-29 nhuff717

transform="scale(0.5)"は間違いなく動作するはずです。あなたはおそらく何か別のことをやっているでしょう。

てみtransform="scale(0.5)"で別のgにg11をラッピングし、preserveAspectRatioここで

出典

2012-04-30 10:51:52 mihai

それをやっている方法の例しかし、CSSと規模での問題ダウンが変換されるということです削除オブジェクトは元のサイズ（まだ小さく見えているにもかかわらず）を持っているので、レイアウトが見栄えが悪いです...少なくともそれは私の経験です。 – Deigote

viewBoxは私が

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

出典

2014-06-13 09:00:33 Peter

複雑なパス定義を持つSVGをどのようにスケールするのですか？

答えて

関連する問題