Question

我有：

装入DIV的SVG
此SVG和DIV是100％宽度和固定高度

我想：

在div的中心点缩放SVG
以1：1的比例拖动SVG鼠标移动，无论比例

我得到的是：

我的SVG一直缩放到左上角坐标0,0
拖拽在1的范围内不是很正确，拖动SVG越远，x和y的错误值越大（超调）
以＆lt; 1 ||的比例拖动＆gt; 1极大地夸大了拖曳量的过冲和下冲

预览： https://codepen.io/Starglider/pen/RQGGqa

我需要以下等式： - x相对于比例的位置 - y相对于比例的位置

笔代码行126到136，我已将该函数放入动画中，以便我可以在0.5到1.5的范围内测试等式

    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    function animate(){

        params.t += 0.01;
        var out = document.getElementById("output1");
        var targetX = Math.sin(params.t) * 100;
        var targetY = Math.cos(params.t) * 100;
        var c = 0.5 + (Math.sin(params.t) * 0.5);
        var scale = 1 + (Math.sin(params.t) * 0.5);

        var xOffset = 0;
        var xBefore = xOffset;
        var xAfter = -xOffset + (scale*-180); // What's the euqation for relative X for scale??

        var yOffset = -500;
        var yBefore = yOffset;
        var yAfter = yOffset * (scale); // What's the euqation for relative Y for scale??

        var msg = "";
        msg += "t:" + params.t.toFixed(3) + " ";
        msg += "scale:" + scale.toFixed(3);
        out.innerHTML = msg;

        setTransformMatrix(
            params.svg.svg.createSVGMatrix()
            .translate(xBefore, yBefore)
            .scale(scale)
            .translate(xAfter, yAfter)
            //.multiply( params.svg.g.getCTM().inverse())
            //.multiply( params.svg.g.getCTM() )
        );


        requestAnimationFrame(animate);
    }
    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

更新：我还创建了另一个版本，它不会操纵SVG本身但是它的DIV容器，类似的结果，仍然需要这个等式，在这里预览：https://codepen.io/Starglider/pen/qxaRdj

您可以提供或链接的任何信息，提示或代码都会有所帮助。

由于

d

Answer 1

使用旧学校闪光技巧进行居中和应用比例，3个容器嵌套，图像/ svg放置在最内部容器中，然后根据需要将变换应用于外部容器，因此根本不需要任何SVG操作

https://codepen.io/Starglider/pen/qxaRdj

<div id="map" class="noselect">

    <div class="drag-container">

      <div class="svg-outer-container">
        <div class="svg-container">

          <svg xmlns="http://www.w3.org/2000/svg" width="250px" height="250px" id="svg1" viewBox="0 0 250 250">
            <g id="g-element">
  <circle cx="125" cy="125" r="120" stroke="#0066CC" stroke-width="4" fill="#CC0000" />
            </g>
</svg>

        </div>
      </div>

    </div>

  </div>

https://codepen.io/Starglider/pen/qxaRdj

SVG规模和位置

1 个答案: