如何使用 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

主要问题是，您在每次动画更改时都在重新插入路径。 这会将路径添加到不受平移缩放控制的 svg 中。

您创建一个路径，然后使用另一个重新插入。 这不会破坏它，但这是不必要的。 拉斐尔拥有无需这样做的工具。

您可以使用新的子路径字符串简单地更改属性“路径”。 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);

提琴手

就是这样，不需要弄乱 2 条路径，并不断删除/读取。 只需使用一个路径和一个路径字符串，并修改路径属性。 这也应该是更好的性能明智的。