Question

我想从中心位置缩放SVG组路径。但是当我将比例级别从 0.05 增加到 1 时，路径看起来从左向右移动并缩放。我想从中心位置缩放SVG，它不应该在缩放上移动。有人请帮忙。

    <svg width="1350" height="400">
    <g id="container_svg_SunBurstElementGroup" transform="scale(1) translate(0, 0)">
<path id="container_layerNumber1_layerIndex0_pointIndex0" fill="#3082bd" stroke-width="2" stroke-dasharray="" d="M 673 45 A 171.5 171.5 0 0 1 842.7544016894899 240.9068250094789 L 706.950880337898 221.38136500189577 A 34.300000000000004 34.300000000000004 1 0 0 673 182.2 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="171.5" start="-1.57" end="0.14359599286715974" innerR="34.300000000000004" counterClockWise="false" x="673" y="216.5" visibility="visible"></path>
<path id="container_layerNumber1_layerIndex0_pointIndex1" fill="#e55725" stroke-width="2" stroke-dasharray="" d="M 842.75437728258 240.9069947638684 A 171.5 171.5 0 0 1 503.24564712449967 240.90716451823366 L 639.0491294248999 221.38143290364673 A 34.300000000000004 34.300000000000004 1 0 0 706.950875456516 221.38139895277368 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="171.5" start="0.14359599286715974" end="2.9995893143124253" innerR="34.300000000000004" counterClockWise="false" x="673" y="216.5" visibility="visible"></path>
<path id="container_layerNumber1_layerIndex0_pointIndex2" fill="#9cbb59" stroke-width="2" stroke-dasharray="" d="M 503.2456227174201 240.90699476386857 A 171.5 171.5 0 0 1 580.2799555314303 72.22511183942484 L 654.4559911062861 187.64502236788496 A 34.300000000000004 34.300000000000004 1 0 0 639.049124543484 221.3813989527737 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="171.5" start="2.9995893143124253" end="4.141986642890532" innerR="34.300000000000004" counterClockWise="false" x="673" y="216.5" visibility="visible"></path>
<path id="container_layerNumber1_layerIndex0_pointIndex3" fill="#F6851F" stroke-width="2" stroke-dasharray="" d="M 580.2800998063649 72.2250191194525 A 171.5 171.5 0 0 1 672.9998284999998 45.00000000008575 L 672.9999657 182.20000000001716 A 34.300000000000004 34.300000000000004 1 0 0 654.456019961273 187.6450038238905 z" stroke="white" stroke-linecap="butt" stroke-linejoin="round" opacity="1" radius="171.5" start="4.141986642890532" end="4.713185307179585" innerR="34.300000000000004" counterClockWise="false" x="673" y="216.5" visibility="visible"></path></g>
    </svg>
    <button onclick="animatePath()">Animate</button>

    <script>
    (function () {
        var path = document.getElementById('container_svg_SunBurstElementGroup');
        var interval = 30;
        var angle = 0;
    var scale = 0.05;
        window.timer = window.setInterval(function () {
         scale = scale + 0.05;
            path.setAttribute("transform", "scale(" +scale +") translate(0, 0)");

            if (scale >= 1) {
                window.clearInterval(window.timer);
            }

            angle += angle_increment;
        }.bind(this), interval);
    })()
    </script>

Fiddle Animate SVG

我在下面的小提琴链接中使用了stackoverflow回答stackoverflow question。但它没有帮助。

CenterX CenterY

谢谢， Bharathi。

从svg宽度和高度的中心缩放svg组路径

0 个答案: