SVG +路徑動畫中的曲線+響應

Question

我使用snap.svg，並試圖實現這樣的行爲。該SVG應該是規模和集中在移動，就像在圖像上。當在盤點上懸停時也是可能的 - 國家名稱應該出現&是可點擊的鏈接。在任何情況下都可以優化代碼？以及如何將svg集中在移動設備上？ Codepen update

var s = Snap("#svg"); 
var startPoint, endPoint; 
var path; 
var circleProps = { 
    fill: 'white', 
    strokeWidth: 3, 
    opacity: 0, 
    class: "cicles" 
}; 
circleProps.stroke = 'white'; 
startPoint = s.circle(770,415,5); 
startPoint.attr(circleProps); 

endPoint = s.circle(795,386,5); 
endPoint.attr(circleProps); 


endPoint1 = s.circle(820,445,5); 
endPoint1.attr(circleProps); 


endPoint2 = s.circle(900,500,5); 
endPoint2.attr(circleProps); 


endPoint3 = s.circle(1050,630,5); 
endPoint3.attr(circleProps); 

endPoint4 = s.circle(1170,540,5); 
endPoint4.attr(circleProps); 

endPoint5 = s.circle(810,600,5); 
endPoint5.attr(circleProps); 

endPoint6 = s.circle(750,460,5); 
endPoint6.attr(circleProps); 

text = s.text(735,350, ["LATVIA"]); 
text.attr({ 
    fill: "white", 
    "font-size": "20px", 
    "font-family": "Verdana", 
    "background": "black", 


}); 

p1 = text.selectAll("tspan:nth-child(2)"); 

p3 = text.selectAll("tspan:nth-child(4)"); 


path = s.path("M770,415,Q790,360,795,386").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path1 = s.path("M770,415,Q800,410,820,445").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path2 = s.path("M770,415,Q880,410,900,500").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path3 = s.path("M770,415,Q1060,410,1050,630").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path4 = s.path("M770,415,Q1060,410,1170,540").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path5 = s.path("M770,415,Q810,410,810,600").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

path6 = s.path("M770,415,Q810,410,750,460").attr({ 
    fill: "none", 
    stroke: "white", 
    strokeWidth: 4 
}); 

var pathLength = Snap.path.getTotalLength(path); 

path.node.style.strokeDasharray = pathLength + ' ' + pathLength; 
path.node.style.strokeDashoffset = pathLength; 

var pathLength1 = Snap.path.getTotalLength(path1); 

path1.node.style.strokeDasharray = pathLength1 + ' ' + pathLength1; 
path1.node.style.strokeDashoffset = pathLength1; 

var pathLength2 = Snap.path.getTotalLength(path2); 

path2.node.style.strokeDasharray = pathLength2 + ' ' + pathLength2; 
path2.node.style.strokeDashoffset = pathLength2; 

var pathLength3 = Snap.path.getTotalLength(path3); 

path3.node.style.strokeDasharray = pathLength3 + ' ' + pathLength3; 
path3.node.style.strokeDashoffset = pathLength3; 

var pathLength4 = Snap.path.getTotalLength(path4); 

path4.node.style.strokeDasharray = pathLength4 + ' ' + pathLength4; 
path4.node.style.strokeDashoffset = pathLength4; 

var pathLength5 = Snap.path.getTotalLength(path5); 

path5.node.style.strokeDasharray = pathLength5 + ' ' + pathLength5; 
path5.node.style.strokeDashoffset = pathLength5; 

var pathLength6 = Snap.path.getTotalLength(path6); 

path6.node.style.strokeDasharray = pathLength6 + ' ' + pathLength6; 
path6.node.style.strokeDashoffset = pathLength6; 

p1.animate({ 
    fill: "white", 
}, 600, mina.easeout); 
startPoint.animate({ 
    r: 5, 
    opacity: 1 
}, 600, mina.easeout); 

setTimeout(function() { 
    endPoint.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint1.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint2.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint3.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint4.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint5.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
    endPoint6.animate({ 
     r: 5, 
     opacity: 1 
    }, 600, mina.easeout); 
}, 1800); 


setTimeout(function() { 
    Snap.animate(pathLength, 0, function(value) { 
    path.node.style.strokeDashoffset = value; 
         }, 1600); 
}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength1, 0, function(value) { 
    path1.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength2, 0, function(value) { 
    path2.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength3, 0, function(value) { 
    path3.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength4, 0, function(value) { 
    path4.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength5, 0, function(value) { 
    path5.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

setTimeout(function() { 
    Snap.animate(pathLength6, 0, function(value) { 
    path6.node.style.strokeDashoffset = value; 
         }, 1600); 

}, 2700); 

// get cordiante 

function svgPoint(element, x, y) { 

    var pt = svg.createSVGPoint(); 
    pt.x = x; 
    pt.y = y; 
    return pt.matrixTransform(element.getScreenCTM().inverse()); 

} 


var svg = document.getElementById('svg'); 
var NS = svg.getAttribute('xmlns'); 
var local = svg.getElementById('Markets'); 
var coords = document.getElementById('coords'); 

svg.addEventListener('mousemove', function(e) { 

    var 
    x = e.clientX, 
    y = e.clientY, 
    svgP = svgPoint(svg, x, y), 
    svgL = svgPoint(local, x, y); 

    // output co-ordinates 
    coords.textContent = 
    '[page: ' + x + ',' + y + 
    '] => [svg space: ' + Math.round(svgP.x) + ',' + Math.round(svgP.y) + 
    '] [local transformed space: ' + Math.round(svgL.x) + ',' + Math.round(svgL.y) + ']' 
    ; 

}, false); 

Answer 1

該解決方案在這裏CODEPEN的快照SVG是強大的類庫，我用它的API。我不太喜歡我的東西與響應式解決方案。

我用這樣的語法將文本標籤附加到鏈接標籤，然後爲每個鏈接設置鏈接屬性，懸停時使用CSS不透明度可以在SVG中單擊城市名稱。

a.add(s.text(715,375, " LATVIA ").attr(linkStyle)); 
a.node.setAttributeNS('http://www.w3.org/1999/xlink', 'href', 'https://uk.wikipedia.org/wiki/%D0%9B%D0%B0%D1%82%D0%B2%D1%96%D1%8F'); 



.map { 
height:450px; 
max-height: 450px; 
position: relative; 
left: calc(100vw/2 - 100vh/2); 

} 

@media screen and (min-width: 640px){ 
    .map { 
    height: 553px; 
    max-height: 553px; 
    left: 0; 
    left: calc(80vw/2 - 100vh/2); 
    } 
} 
@media screen and (min-width: 1200px){ 
    .map { 
    height: 838px; 
    max-height: 838px; 
    left: 0; 
    } 
}