Question

我在svg路径数据中创建了两个多边形。我想缩小上层第一层，例如速率为0.4。然后将缩放的一个转换为具有相同左上角点的原始位置。这是要显示的图片。 This is what I want to achieve. This is what I did right now.

现在我只能使用jQuery获得第二个图片级别。有人可以帮帮我吗？谢谢你太多了!!

＆＃13;

$(document).ready(function () {
	var offsetLeftO = $("#undeveloped:first").offset().left;
	var offsetTopO = $("#undeveloped:first").offset().top;

	$("#developed").css({'transform':'scale(0.4)'});
	var offsetLeft = $("#developed:first").offset().left;
    var offsetTop = $("#developed:first").offset().top;
        
    var offsetX =  offsetLeftO - offsetLeft;
    var offsetY =  offsetTopO - offsetTop;
    
	$("#developed").css({'transform': 'translate('+offsetX+'px, '+offsetY+'px)'+'scale(0.4)'});
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="170mm"
   height="170mm"
   viewBox="0 0 602.36221 602.36215">
    <path
     style="fill:#00b400;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93257946px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 307.99025,332.70033 215.2088,-39.40415 -5.50808,198.59689 -190.81585,-1.18212 z"
     id="undeveloped"
     inkscape:connector-curvature="0" />
  <path
  style="fill:#ff5a00;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.93257946px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 307.99025,332.70033 215.2088,-39.40415 -5.50808,198.59689 -190.81585,-1.18212 z"
     id="developed"
  />
  
</svg>

＆＃13;

Answer 1

我创造了一个小提琴。因此，偏移的值等于每个多边形。

你必须计算偏差“manualy”才能获得好位置。由于左上角已经从正方形移动，你不能只用“0.4”的倒数进行除法，但你必须找到好的值。

这是我能做的最好的，但其他人当然可以改善这个答案。

希望它会有所帮助。

这是jQuery：

$(document).ready(function () {

    $("#developed").css({'transform':'scale(0.4)'});
    var offsetLeft = $("#developed:first").offset().left;
    var offsetTop = $("#developed:first").offset().top;


    var offsetX = offsetLeft /1.81;
    var offsetY = offsetTop /1.6;

    $("#developed").css({'transform': 'translate('+offsetX+'px, '+offsetY+'px)'+'scale(0.4)'});
});

小提琴：https://jsfiddle.net/f92yx76c/1/

缩放HTML SVG路径元素，并使用jquery

1 个答案: