web-dev-qa-db-ja.com

いくつかの複雑なパス定義を持つ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>

SVGの「元の」寸法は、300x310ピクセルの画像を生成します。画像全体をスケーリングしたいとします。たとえば、50％拡大します。画像を拡大縮小するためにさまざまな方法を試しましたが、私が達成した最善の方法は、元の画像を元のサイズの50％の領域に単にクリップまたは「クロップ」することです。

PreserveAspectRatioの使用、ビューボックスの設定、transform = "scale（0.5"）の使用などは機能しませんでした。元のサイズを50％拡大するだけです。

svgscale
19
nhuff717

transform="scale(0.5)"は確実に機能するはずです。あなたはおそらく他の何か間違ったことをしています。

_g11_を別のgでtransform="scale(0.5)"でラップして、preserveAspectRatioとviewBoxを削除してみてください

24
mihai

ここに私がそれをやっている方法の例があります

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