Не могу получить элемент svg, чтобы следовать за мышью точно

Я использую Snap svg, и я хочу поместить элемент так, чтобы он всегда находился под указателем мыши. Я видел разные темы, но ничего не кажется текущим (setAttribute не находится в документах Snap, поэтому я только что использовал преобразование).Не могу получить элемент svg, чтобы следовать за мышью точно

Этот код заставляет элемент следовать за мышью с каким-то квадратным соотношением между мышью x, y и элементом x, y. Почему это и как я могу это исправить?

var tree1xy = tree1.getBBox(); 


park.hover(function() { 
    follow(); 
}); 

    function follow() { 

     map.mousemove(moveFunc); 

     function moveFunc(ev, x, y) { 
      tree1.transform('t' + (x - tree1xy.x) + ',' + (y - tree1xy.y)); 
     }; 

    };

У меня есть это в CSS, но разделив все на три, кажется, не исправить вещи:

svg { 
width: 33%; 
height: auto; 
}

<head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <script type="text/javascript" src="js/snap.svg-min.js"></script> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

</head> 

<body> 


    <div id="map"> 

    </div> 


    <script type="text/javascript" src="js/main2.js"></script> 

</body>

источник

2016-05-04 Davtho1983

Можете ли вы показать нам HTML/SVG пожалуйста? –

Загрузил html - svg огромный - мне понадобится немного времени, чтобы сделать меньшую версию. Sucks Я не могу просто загрузить его с помощью загрузки изображения:/ – Davtho1983

я не могу конечно, но я предполагаю, что вам нужно абсолютное преобразование вместо относительного.

т = относительное преобразование

Т = абсолютное преобразование

var s = Snap("#svg") 
 
    , c = s.circle(10, 10, 10) 
 
    , coords = document.querySelector('#coords') 
 

 
s.mousemove(function(ev, x, y) { 
 
    coords.innerText = `${x},${y}` 
 
    var bb = c.getBBox() 
 
    , mx = x - bb.r0 
 
    , my = y - bb.r0 
 
    
 
    c.transform("T" + mx + "," + my) 
 
}) 
 

 

 
//t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale 
 
//r=relative rotate, R=relative rotate 
 
//relative means it takes into account previous transforms to accumulate 
 
//here it doesn't make much difference, until we combine later

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script> 
 
<svg id="svg" width="1024" height="1024"></svg> 
 
<div id="coords"></div>

обновление: модифицированная О.П. скрипка

http://jsfiddle.net/t2qvfLw5/51

var container = Snap('#svg-container') 
 
    , map = container.select("#svg-of-the-park") 
 
    , group = container.select("#group-of-shapes") 
 
    , tree1 = container.select('#tree1') 
 
    , park = container.select('#park') 
 
    , coords = document.querySelector('#coords') \t // for debug only 
 
    , in_the_park = false 
 
; 
 

 
park.attr('fillOpacity', '0') 
 

 
park.hover(
 
    function mouseInThePark() { 
 
    in_the_park = true 
 
    }, 
 
    function mouseLeftThePark() { 
 
    in_the_park = false 
 
    } 
 
) 
 

 
container.mousemove(function(ev, x, y) { 
 
    if (!in_the_park) return 
 

 
    var bb = tree1.getBBox() 
 
    , p_bb = group.getBBox() 
 
    , pos_x = Math.floor(
 
     x 
 
     - bb.x 
 
     - p_bb.x 
 
     + container.node.offsetLeft 
 
    ) 
 
    , pos_y = Math.floor(
 
     y 
 
     - bb.y 
 
     - p_bb.y 
 
     - bb.height 
 
     - container.node.offsetTop 
 
    ) 
 
    ; 
 
    
 
    coords.innerText = `${x},${y} => ${pos_x},${pos_y}` 
 
    
 
    tree1.transform(
 
    `translate(${pos_x},${pos_y})`); 
 
});

<script src="http://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script> 
 
\t <body> 
 
    <div id="coords">...</div> 
 
\t \t <div id="svg-container"> 
 
    
 
    <!-- notice the svg itself gets an element id --> 
 
     <svg 
 
     id="svg-of-the-park" 
 
     version="1.1" 
 
     xmlns="http://www.w3.org/2000/svg" 
 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
 
     x="0px" 
 
     y="0px" 
 
     width="712.464px" 
 
     height="1000px" 
 
     viewBox="0 0 712.464 900" 
 
     enable-background="new 0 0 712.464 899.955" 
 
     xml:space="preserve" 
 
     > 
 
      <!-- notice also that the group element is not the same as the parent div --> 
 
      <g id="group-of-shapes"> 
 
      <polyline id="Large_Triangle" fill="#4E4E4E" points="352.732,31.586 23.392,879.586 673.892,879.586 \t "/> 
 
      <polyline id="Sm_Triangle" fill="#4E4E4E" points="462.892,272.391 462.892,272.391 693.892,271.891 
 
      580.401,577.821 \t "/> 
 
      <polyline id="grass" fill="#9FB718" points="389.79,715.391 472.392,602.391 569.059,602.391 605.21,697.967 
 
      521.392,815.345 417.555,815.344 389.79,780.891 389.79,715.391 \t "/> 
 
      <polygon id="tree7" fill="#73850B" points="495.726,796.562 505.892,796.562 505.892,802.062 512.059,802.062 
 
      512.059,796.562 523.559,796.562 509.642,761.729 \t "/> 
 
      <polyline id="tree6" fill="#73850B" points="545.729,593.209 533.059,624.058 543.059,624.058 542.892,629.891 
 
      547.893,629.891 547.975,624.055 558.482,624.055 545.729,593.209 \t "/> 
 
      <polygon id="tree5" fill="#73850B" points="527.392,677.391 514.892,711.391 524.392,711.391 524.392,716.891 
 
      530.392,716.891 530.392,711.391 540.892,711.391 \t "/> 
 
      <polygon id="tree4" fill="#73850B" points="505.726,659.893 495.726,685.726 504.059,685.726 504.059,690.059 
 
      508.393,690.059 508.393,685.726 516.059,685.726 \t "/> 
 
      <polygon id="tree3" fill="#73850B" points="501.393,700.06 491.893,724.727 499.559,724.727 499.559,729.227 
 
      504.059,729.227 504.059,724.727 512.059,724.727 \t "/> 
 
      <polygon id="tree2" fill="#73850B" points="410.726,748.394 421.559,748.394 421.559,754.061 426.893,754.061 
 
      426.893,748.394 438.226,748.394 424.476,713.727 \t "/> 
 
      <polygon id="tree1" fill="#73850B" points="445.726,742.062 435.393,769.514 444.227,769.395 444.226,773.895 
 
      448.559,773.895 448.559,769.395 457.059,769.229 \t "/> 
 
      <polygon id="_x3C_Rd_x5F_7_x3E_" fill="#FFF167" points="467.631,272.38 536.892,367.557 639.225,367.557 639.287,271.992 
 
      650.287,271.992 650.225,367.557 658.402,367.557 654.801,377.266 650.225,377.266 650.225,389.602 639.559,418.354 
 
      639.559,377.391 536.892,377.266 516.892,413.224 511.892,399.891 524.642,377.141 503.162,377.141 499.475,367.557 
 
      524.642,367.557 471.479,294.679 462.892,272.391 \t "/> 
 
      <path id="_x3C_Rd_x5F_6_x3E_" fill="#FFF167" d="M536.559,794.105l11.016-15.427c0,0,0.016,67.879,0.016,68.879 
 
      s75.854-101.22,75.854-101.22l5.303,13.986l-16.084,20.583l30.896,41.984l-8.917,7.151l-29.432-40.151l-24.984,34.333 
 
      l41.695,55.362h-14.333l-34.362-46.362l-33.667,46.362h-13.333l10.333-16.029v-67.333"/> 
 
      <polygon id="_x3C_Rd_x5F_5_x3E_" fill="#FFF167" points="351.56,623.558 351.56,733.894 389.79,733.894 389.79,746.338 
 
      351.56,746.338 351.56,811.558 340.227,811.558 340.227,642.225 \t "/> 
 
      <polygon id="_x3C_Rd_x5F_4_x3E_" fill="#FFF167" points="393.227,555.89 399.894,545.89 457.059,623.366 450.185,632.77 \t "/> 
 
      <polyline id="_x3C_Rd_x5F_3_x3E_" fill="#FFF167" points="134.227,811.558 147.892,812.534 147.892,589.266 158.621,589.33 
 
      262.894,740.223 269.227,729.227 205.561,638.89 295.561,638.89 295.561,628.223 198.561,628.223 171.894,589.33 279.667,589.33 
 
      295.561,609.89 295.561,590.89 191.007,448.002 186.12,460.587 270.553,577.821 140.54,577.948 135.408,591.161 \t "/> 
 
      <polygon id="_x3C_Rd_x5F_2_x3E_" fill="#FFF167" points="310.392,516.891 399.892,516.891 393.227,528.891 310.392,528.891 \t "/> 
 
      <polygon id="_x3C_Rd_x5F_1_x3E_" fill="#FFF167" points="295.561,381.391 216.877,381.391 212.371,392.994 295.561,392.994 \t "/> 
 
      <path id="_x3C_Lg_x5F_rd_x5F_top_x5F_curve_x3E_" fill="#D3D3D3" d="M423.499,838.141c0,0,0,0,0-13.75 
 
      s-11.107-12.833-11.107-12.833"/> 
 
      <path id="_x3C_Lg_x5F_rd_x5F_btm_x3E_" fill="#D3D3D3" d="M254.645,833.354H41.347l-5.213,13.424h354.343l-0.149,32.811 
 
      l12.815-0.003c0,0,0.107-20.771,0.107-33.398s-11.107-12.833-11.107-12.833H258.31H254.645z"/> 
 
      <polygon fill="#D3D3D3" points="295.561,178.793 295.561,686.558 262.894,740.223 262.894,811.558 49.812,811.558 44.599,824.981 
 
      410.726,824.981 410.478,879.586 423.392,879.586 423.499,824.391 412.392,811.558 278.558,811.558 278.558,742.062 
 
      491.893,397.225 484.522,378.558 310.392,659.893 310.392,140.605 \t "/> 
 
      <circle id="_x3C_Roundabout_x5F_lg_x3E_" fill="#888888" cx="269.906" cy="830.043" r="28.209"/> 
 
      <circle id="_x3C_Roundabout_x5F_sm_x3E_" fill="#C5C5C5" cx="269.867" cy="830.107" r="15.901"/> 
 
      </g> 
 

 

 
      <g id="Locations"> 
 

 
      <polyline id="park" fill="#000000" stroke="none" points="473.707,601.598 389.791,714.644 389.791,781.896 
 
      417.946,815.345 521.232,815.345 605.21,700.06 568.232,602.896 "/> 
 

 
      </g> 
 

 
     </svg> 
 
\t \t </div> 
 

 
\t </body>

, к сожалению, с помощью масштабирования CSS делает бросить все это, я думаю, было бы легче справиться с повторной калибровки другой способ

источник

2016-05-04 17:06:43 slf

Я пробовал это - он не работал, но, видимо, есть проблема с Snap и абсолютными преобразованиями? – Davtho1983

Это, безусловно, правильный подход, но у меня возникли проблемы с тем, что эта работа переместила мой элемент внутри моего svg - похоже, это определение местоположения. Я особенно не понимаю вращательное поведение? Боюсь, я довольно новичок в svg и Snap. Кажется, что t и T делают то же самое для меня – Davtho1983

@ Davtho1983, если вы можете показать сломанный jsfiddle, тогда мы сможем дать вам больше помощи, пример, который я вставил, кажется, работает очень хорошо – slf

Не могу получить элемент svg, чтобы следовать за мышью точно

ответ

Смежные вопросы