如何使用 svg-pan-zoom 库添加新元素？

Question

我正在使用平移缩放库来缩放 SVG 元素。当我尝试在缩放后添加新路径时，它根据旧坐标显示不正确。这是代码 - JSFIDDLE。出现此问题的原因可能是新元素未放置在 pan-zoom HTML 标记中。如何添加新对象以将其放置在正确的平移缩放坐标？

$j(function() {
  var paper = Raphael('map', 1024, 768),

    attributes = {
      fill: 'none',
      stroke: '#808080',
      'fill-opacity': 0.6,
      'mode': 'multiply',
    }

 paper.canvas.setAttribute("viewBox", "0 0 647.67999 432.95999");
 paper.canvas.setAttribute('id', 'mySvgElement');
    
        //Compare the params
        var compareSize = function(boxWidth, boxHeight, minValue) {
            if ((boxWidth + boxHeight)/24 < minValue) {
            return minValue;
            } else {
            return (boxWidth + boxHeight)/24;
            }
        }
    //Show route

    var root = paper.path('M124.00721,89.633281C124.29828,91.15717599999999,124.58836,92.680072,124.87743,94.201967C124.51583000000001,95.145731,124.15325,96.23349499999999,123.78965000000001,97.247759C123.50057000000001,98.771685,123.21050000000001,100.29455,122.91943,101.81645C122.70287,102.90525000000001,122.48531000000001,103.99301,122.26676,105.07979C122.26776000000001,106.38616,122.26776000000001,107.69147000000001,122.26676,108.99581C122.63036000000001,109.79453000000001,122.99295000000001,110.59222000000001,123.35454,111.38893C123.71814,111.89757,124.51584,113.13038,125.09499,113.99961C125.74866999999999,115.30597,126.40133,116.61129,127.053,117.91563000000001C127.054,119.14947000000001,127.054,120.38227,127.053,121.61409C127.34407999999999,122.92045,127.63414999999999,124.22577000000001,127.92323,125.5301C128.57691,126.25631,129.22957,126.98148,129.88123000000002,127.70567C131.69524,129.08455,133.50818,130.46239,135.32015,131.83924C136.40895,133.21813,137.49671,134.59596,138.58349,135.97281999999998C139.23718000000002,137.93185999999997,139.88983000000002,139.88983,140.5415,141.84684C140.54250000000002,143.95093,140.54250000000002,146.05392999999998,140.5415,148.15598C140.03486,150.40511,139.52724,152.65315,139.01861000000002,154.90023C139.52725000000004,156.93179999999998,140.03487,158.96229,140.5415,160.99181C140.39746000000002,162.80581999999998,140.25243,164.61875999999998,140.10639,166.43072999999998C140.25243,168.31725999999998,140.39747,170.20271,140.5415,172.0872C140.76006,174.11876,140.97762,176.14925,141.19417,178.17878C141.41273,180.06530999999998,141.63029,181.95076,141.84684000000001,183.83525C141.77534000000003,185.28665,141.70280000000002,186.737,141.62929000000003,188.18638C140.97760000000002,190.14543,140.32495000000003,192.10340000000002,139.67128000000002,194.06040000000002C139.01959000000002,195.87441,138.36694000000003,197.68735,137.71327000000002,199.49932C136.91655000000003,200.80568000000002,136.11885,202.11099000000002,135.32015,203.41533C134.30586000000002,204.57666,133.29062000000002,205.73694,132.27436,206.89624C130.96999,207.47740000000002,129.66468,208.05754000000002,128.35834,208.63669000000002C126.69136999999999,210.37818000000001,125.02347,212.11859,123.35454,213.85805000000002C122.99294,215.30945000000003,122.63035,216.7598,122.26676,218.20918000000003C122.70288000000001,220.38578000000004,123.28302000000001,222.70634000000004,123.78965000000001,224.95343000000003C124.37081,226.33231000000004,124.95095,227.71014000000002,125.5301,229.08700000000002C124.95094,230.10329000000002,124.3708,231.11853000000002,123.78965000000001,232.13279000000003C122.70285000000001,233.65672000000004,121.61509000000001,235.17958000000002,120.5263,236.70148000000003C120.38226,238.37045000000003,120.23723000000001,240.03835000000004,120.09119000000001,241.70528000000004C120.74487,243.08416000000005,121.39753000000002,244.46199000000004,122.04920000000001,245.83885000000004C122.41280000000002,247.58034000000004,122.77539000000002,249.46579000000003,123.13698000000001,251.27777000000003C123.28302000000001,252.94673000000003,123.42806,254.61463000000003,123.5721,256.28156C122.84789,258.67573,122.12272,261.06881,121.39653000000001,263.46093C120.67233000000002,264.91234000000003,119.94715000000001,266.36268,119.22097000000001,267.81206000000003C119.0044,269.48103000000003,118.78685000000002,271.14893,118.56830000000001,272.81586000000004C119.07694000000001,274.33979000000005,119.58456000000001,276.15273,120.09119000000001,277.81966000000006C120.67235000000001,278.98098000000005,121.25249000000001,280.14126000000005,121.83164000000001,281.3005600000001C121.83264000000001,282.9695300000001,121.83264000000001,284.63743000000005,121.83164000000001,286.3043600000001C121.25248,287.8282900000001,120.67234,289.3511500000001,120.09119000000001,290.8730500000001C119.6303,292.3220900000001,119.16843000000001,293.7700700000001,118.70555000000002,295.21708000000007').hide();

var circle = paper.circle(150, 40, 10);


  var animatePath = function(path, duration, attributes) {
    //root.glow({color: "#04d413",opacity: 1, width: 5});
    var circle = paper.circle(50, 40, 10);

    if (!duration) duration = 1500;
    if (!attributes) attributes = {};

    var len = root.getTotalLength();
    var previous;
    root.hide();
    $j(root.node).animate({
      'to': 1
    }, {
      'duration': duration,
      'step': function(pos, fx) {
        var offset = len * fx.pos;
        var subpath = root.getSubpath(0, offset);
        if (previous) previous.remove();
        previous = root.paper.path(subpath).attr(attributes);
        console.log();
      },
      'complete': function() {
        //previous.remove();
        //root.show();
      }
    });
  };
animatePath(root, 2000, {"stroke": "green", "stroke-dasharray": "- "});

});

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}

.wrapper {
margin: 0 auto;
width: 1024px;
position: relative;
}

path {
    /*mix-blend-mode: multiply;*/
    /*mix-blend-mode: multiply;*/
}

path:hover{
    /*mix-blend-mode: multiply;*/
}

#map {
float: left;
clear: both;
width: 1024px;
height: 768px;
}

.point img {
vertical-align: middle;
margin-right: 10px;
}

a img {
border: none;
}

.point{
position: absolute;
background: #fff;
width: 300px;
height: 600px;
top: 10%;
left: 85%;
/*transform: translate(-50%, -50%);*/
border-radius: 5px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 12px 20px -10px;
text-align: center;
display: none;
}

.point .close {
display: block;
position: absolute;
top: -10px;
right: -10px;
width: 24px;
height: 24px;
text-indent: -9999px;
outline: none;
background: url(../img/close.png) no-repeat;
}

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Raphael Map</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    var $j = jQuery.noConflict();
</script> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script data-semver="2.0.3" data-require="jquery@2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type='text/javascript'>
    var $i = jQuery.noConflict();
</script> 

<script data-semver="2.1.0" data-require="raphael@2.1.0" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://chrismichaelscott.github.io/fraphael/downloads/fraphael.js"></script>
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>


</head>

<body>
 
    <div class="wrapper">
        <div id="map">
        </div>
    </div>

    <div id="myDIV">
    1
    </div>
        
    <script>
      // Don't use window.onLoad like this in production, because it can only listen to one function.
      window.onload = function() {
        // Expose to window namespase for testing purposes
        window.zoomTiger = svgPanZoom('#mySvgElement', {
          zoomEnabled: true,
          controlIconsEnabled: true,
          fit: true,
          center: true,
          // viewportSelector: document.getElementById('demo-tiger').querySelector('#g4') // this option will make library to misbehave. Viewport should have no transform attribute
        });

        /*document.getElementById('enable').addEventListener('click', function() {
          window.zoomTiger.enableControlIcons();
        })
        document.getElementById('disable').addEventListener('click', function() {
          window.zoomTiger.disableControlIcons();
        })*/
      };
 </script>

</body>
</html>

如何添加新对象以将其放置在正确的平移缩放坐标上？

Answer 1

主要问题是您在每次动画更改时重新插入路径。这会将路径添加到不受 pan-zoom 控制的 svg 中。

您创建了一条路径，然后也使用另一条路径重新插入。那不会破坏它，但是没有必要。 Raphael 拥有不需要它的工具。

您可以简单地用新的子路径字符串更改属性 'path'。 Raphael 有自己的 getSubpath() 和 getTotalLength() 方法，不需要元素。

所以关键的变化是...

将路径字符串设置为实际字符串，而不是元素。

var pathString = 'M124.00721,89.633281C12...very long string';

// Get the length of the path
var len = Raphael.getTotalLength(pathString);

// create a basic empty path, we will use to amend.
var path = paper.path("M0,0").attr(attributes)

// inside animation, get our new subpath...
var subpath = Raphael.getSubpath(pathString, 0, offset);

// now, simply change it's attribute, no need to delete/readd
path.attr('path', subpath).attr(attributes);

jsfiddle

就是这样，不需要再纠结于 2 条路径，并且不断 deleting/readding。只需使用一个路径和一个路径字符串，并修改路径属性。这也应该是更好的性能。

如何使用 svg-pan-zoom 库添加新元素？

How to add new element with svg-pan-zoom library?

javascript

raphael

svgpanzoom