jquery - 缩放 HTML SVG 路径元素并使用 jquery 中的 css 将左上点转换为原始左上点

Question

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

现在我只能使用 jQuery 获取第二个图片级别。任何人都可以帮助我吗？非常感谢!!

$(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)'});
});

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

Answer 1

我创建了一个 fiddle 。因此，偏移值等于每个多边形。

您必须“手动”计算偏移量以获得良好的位置。由于左上角已经从正方形移动，你不能只用“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)'});
});

还有 fiddle :https://jsfiddle.net/f92yx76c/1/