Gráfica D3 Force Directed: ¿por qué no aparecen las banderas?

SITUACIÓN:

Cada node debe tener su bandera correspondiente en él, ese no es el caso.


CÓDIGO:

 body { font-family: Lato; background-color: #F5F5F5; } .title { margin-top: 30px; margin-bottom: 30px; } #results { text-align: center; } #results div { margin-top: 15px; } #results { background-color: white; margin: auto; width: 1200px; padding: 40px; box-shadow: 2px 2px 2px black; } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */ .flag { display: inline-block; width: 16px; height: 11px; background-image: url("http://sofes.miximages.com/javascript/flags.png") no-repeat; } .flag.flag-td { background-position: -240px -132px; } .flag.flag-pw { background-position: 0 -121px; } .flag.flag-fk { background-position: -32px -44px; } .flag.flag-im { background-position: -48px -66px; } .flag.flag-fr { background-position: -80px -44px; } .flag.flag-sh { background-position: -240px -121px; } .flag.flag-bg { background-position: -64px -11px; } .flag.flag-ly { background-position: -48px -88px; } .flag.flag-tk { background-position: -64px -143px; } .flag.flag-re { background-position: -48px -121px; } .flag.flag-nl { background-position: -240px -99px; } .flag.flag-sv { background-position: -160px -132px; } .flag.flag-sa { background-position: -128px -121px; } .flag.flag-ck { background-position: -128px -22px; } .flag.flag-tr { background-position: -144px -143px; } .flag.flag-pr { background-position: -224px -110px; } .flag.flag-tv { background-position: -176px -143px; } .flag.flag-sd { background-position: -192px -121px; } .flag.flag-uy { background-position: -16px -154px; } .flag.flag-bb { background-position: 0 -11px; } .flag.flag-za { background-position: -256px -154px; } .flag.flag-vu { background-position: -144px -154px; } .flag.flag-ba { background-position: -256px 0; } .flag.flag-kr { background-position: -80px -77px; } .flag.flag-tf { background-position: -256px -132px; } .flag.flag-cl { background-position: -144px -22px; } .flag.flag-ki { background-position: -16px -77px; } .flag.flag-lr { background-position: -240px -77px; } .flag.flag-do { background-position: -96px -33px; } .flag.flag-dz { background-position: -112px -33px; } .flag.flag-cr { background-position: -208px -22px; } .flag.flag-ar { background-position: -144px 0; } .flag.flag-sb { background-position: -144px -121px; } .flag.flag-tj { background-position: -48px -143px; } .flag.flag-cw { background-position: -256px -22px; } .flag.flag-bv { background-position: -224px -11px; } .flag.flag-pn { background-position: -208px -110px; } .flag.flag-so { background-position: -80px -132px; } .flag.flag-la { background-position: -160px -77px; } .flag.flag-me { background-position: -112px -88px; } .flag.flag-sx { background-position: -176px -132px; } .flag.flag-sy { background-position: -192px -132px; } .flag.flag-gq { background-position: -32px -55px; } .flag.flag-ro { background-position: -64px -121px; } .flag.flag-kurdistan { background-position: -96px -77px; } .flag.flag-si { background-position: -256px -121px; } .flag.flag-mh { background-position: -144px -88px; } .flag.flag-ky { background-position: -128px -77px; } .flag.flag-eh { background-position: -176px -33px; } .flag.flag-ru { background-position: -96px -121px; } .flag.flag-tz { background-position: -208px -143px; } .flag.flag-np { background-position: 0 -110px; } .flag.flag-pg { background-position: -128px -110px; } .flag.flag-lb { background-position: -176px -77px; } .flag.flag-sn { background-position: -64px -132px; } .flag.flag-gw { background-position: -112px -55px; } .flag.flag-tt { background-position: -160px -143px; } .flag.flag-eg { background-position: -160px -33px; } .flag.flag-gn { background-position: 0 -55px; } .flag.flag-al { background-position: -80px 0; } .flag.flag-jm { background-position: -192px -66px; } .flag.flag-be { background-position: -32px -11px; } .flag.flag-kn { background-position: -48px -77px; } .flag.flag-mu { background-position: -48px -99px; } .flag.flag-az { background-position: -240px 0; } .flag.flag-gh { background-position: -208px -44px; } .flag.flag-vg { background-position: -96px -154px; } .flag.flag-ug { background-position: -240px -143px; } .flag.flag-rw { background-position: -112px -121px; } .flag.flag-pl { background-position: -176px -110px; } .flag.flag-at { background-position: -176px 0; } .flag.flag-bs { background-position: -192px -11px; } .flag.flag-ee { background-position: -144px -33px; } .flag.flag-no { background-position: -256px -99px; } .flag.flag-ca { background-position: -16px -22px; } .flag.flag-ml { background-position: -176px -88px; } .flag.flag-vc { background-position: -64px -154px; } .flag.flag-mc { background-position: -80px -88px; } .flag.flag-vi { background-position: -112px -154px; } .flag.flag-fj { background-position: -16px -44px; } .flag.flag-sj { background-position: 0 -132px; } .flag.flag-ic { background-position: -240px -55px; } .flag.flag-fo { background-position: -64px -44px; } .flag.flag-lu { background-position: -16px -88px; } .flag.flag-nf { background-position: -192px -99px; } .flag.flag-mm { background-position: -192px -88px; } .flag.flag-er { background-position: -208px -33px; } .flag.flag-somaliland { background-position: -96px -132px; } .flag.flag-lc { background-position: -192px -77px; } .flag.flag-cd { background-position: -48px -22px; } .flag.flag-ma { background-position: -64px -88px; } .flag.flag-mp { background-position: -240px -88px; } .flag.flag-mx { background-position: -96px -99px; } .flag.flag-na { background-position: -144px -99px; } .flag.flag-gs { background-position: -64px -55px; } .flag.flag-tw { background-position: -192px -143px; } .flag.flag-ae { background-position: -16px 0; } .flag.flag-cu { background-position: -224px -22px; } .flag.flag-id { background-position: -256px -55px; } .flag.flag-ht { background-position: -208px -55px; } .flag.flag-kw { background-position: -112px -77px; } .flag.flag-by { background-position: -256px -11px; } .flag.flag-il { background-position: -16px -66px; } .flag.flag-ps { background-position: -240px -110px; } .flag.flag-tl { background-position: -80px -143px; } .flag.flag-ai { background-position: -64px 0; } .flag.flag-gp { background-position: -16px -55px; } .flag.flag-pt { background-position: -256px -110px; } .flag.flag-gr { background-position: -48px -55px; } .flag.flag-bw { background-position: -240px -11px; } .flag.flag-kp { background-position: -64px -77px; } .flag.flag-mq { background-position: -256px -88px; } .flag.flag-ad { background-position: 0 0; } .flag.flag-gu { background-position: -96px -55px; } .flag.flag-cf { background-position: -64px -22px; } .flag.flag-ni { background-position: -224px -99px; } .flag.flag-ke { background-position: -240px -66px; } .flag.flag-mz { background-position: -128px -99px; } .flag.flag-kh { background-position: 0 -77px; } .flag.flag-us { background-position: 0 -154px; } .flag.flag-wf { background-position: -176px -154px; } .flag.flag-hk { background-position: -144px -55px; } .flag.flag-ph { background-position: -144px -110px; } .flag.flag-de { background-position: -32px -33px; } .flag.flag-sc { background-position: -160px -121px; } .flag.flag-tibet { background-position: -32px -143px; } .flag.flag-cy { background-position: 0 -33px; } .flag.flag-scotland { background-position: -176px -121px; } .flag.flag-ws { background-position: -192px -154px; } .flag.flag-ci { background-position: -112px -22px; } .flag.flag-bf { background-position: -48px -11px; } .flag.flag-tn { background-position: -112px -143px; } .flag.flag-my { background-position: -112px -99px; } .flag.flag-mw { background-position: -80px -99px; } .flag.flag-an { background-position: -112px 0; } .flag.flag-nr { background-position: -16px -110px; } .flag.flag-pm { background-position: -192px -110px; } .flag.flag-xk { background-position: -208px -154px; } .flag.flag-es { background-position: -224px -33px; } .flag.flag-pa { background-position: -80px -110px; } .flag.flag-jp { background-position: -224px -66px; } .flag.flag-mr { background-position: 0 -99px; } .flag.flag-pf { background-position: -112px -110px; } .flag.flag-cn { background-position: -176px -22px; } .flag.flag-au { background-position: -192px 0; } .flag.flag-cv { background-position: -240px -22px; } .flag.flag-ao { background-position: -128px 0; } .flag.flag-fi { background-position: 0 -44px; } .flag.flag-nc { background-position: -160px -99px; } .flag.flag-ag { background-position: -48px 0; } .flag.flag-gy { background-position: -128px -55px; } .flag.flag-nu { background-position: -32px -110px; } .flag.flag-to { background-position: -128px -143px; } .flag.flag-qa { background-position: -32px -121px; } .flag.flag-dm { background-position: -80px -33px; } .flag.flag-aw { background-position: -208px 0; } .flag.flag-cz { background-position: -16px -33px; } .flag.flag-mk { background-position: -160px -88px; } .flag.flag-ax { background-position: -224px 0; } .flag.flag-pk { background-position: -160px -110px; } .flag.flag-st { background-position: -144px -132px; } .flag.flag-bz { background-position: 0 -22px; } .flag.flag-br { background-position: -176px -11px; } .flag.flag-am { background-position: -96px 0; } .flag.flag-bh { background-position: -80px -11px; } .flag.flag-gg { background-position: -192px -44px; } .flag.flag-um { background-position: -256px -143px; } .flag.flag-ga { background-position: -96px -44px; } .flag.flag-yt { background-position: -240px -154px; } .flag.flag-gd { background-position: -128px -44px; } .flag.flag-dj { background-position: -48px -33px; } .flag.flag-ss { background-position: -128px -132px; } .flag.flag-gt { background-position: -80px -55px; } .flag.flag-sk { background-position: -16px -132px; } .flag.flag-sm { background-position: -48px -132px; } .flag.flag-bd { background-position: -16px -11px; } .flag.flag-jo { background-position: -208px -66px; } .flag.flag-iq { background-position: -96px -66px; } .flag.flag-bt { background-position: -208px -11px; } .flag.flag-it { background-position: -144px -66px; } .flag.flag-mg { background-position: -128px -88px; } .flag.flag-sr { background-position: -112px -132px; } .flag.flag-sg { background-position: -224px -121px; } .flag.flag-ec { background-position: -128px -33px; } .flag.flag-ge { background-position: -144px -44px; } .flag.flag-ie { background-position: 0 -66px; } .flag.flag-kz { background-position: -144px -77px; } .flag.flag-tc { background-position: -224px -132px; } .flag.flag-tg { background-position: 0 -143px; } .flag.flag-lv { background-position: -32px -88px; } .flag.flag-mo { background-position: -224px -88px; } .flag.flag-mv { background-position: -64px -99px; } .flag.flag-sz { background-position: -208px -132px; } .flag.flag-va { background-position: -48px -154px; } .flag.flag-bn { background-position: -144px -11px; } .flag.flag-bj { background-position: -112px -11px; } .flag.flag-zm { background-position: -16px -165px; } .flag.flag-co { background-position: -192px -22px; } .flag.flag-mn { background-position: -208px -88px; } .flag.flag-zw { background-position: -32px -165px; } .flag.flag-vn { background-position: -128px -154px; } .flag.flag-sl { background-position: -32px -132px; } .flag.flag-gi { background-position: -224px -44px; } .flag.flag-as { background-position: -160px 0; } .flag.flag-catalonia { background-position: -32px -22px; } .flag.flag-gb { background-position: -112px -44px; } .flag.flag-gl { background-position: -240px -44px; } .flag.flag-england { background-position: -192px -33px; } .flag.flag-py { background-position: -16px -121px; } .flag.flag-th { background-position: -16px -143px; } .flag.flag-eu { background-position: -256px -33px; } .flag.flag-zanzibar { background-position: 0 -165px; } .flag.flag-ch { background-position: -96px -22px; } .flag.flag-km { background-position: -32px -77px; } .flag.flag-om { background-position: -64px -110px; } .flag.flag-et { background-position: -240px -33px; } .flag.flag-fm { background-position: -48px -44px; } .flag.flag-ve { background-position: -80px -154px; } .flag.flag-io { background-position: -80px -66px; } .flag.flag-bm { background-position: -128px -11px; } .flag.flag-lk { background-position: -224px -77px; } .flag.flag-ye { background-position: -224px -154px; } .flag.flag-ms { background-position: -16px -99px; } .flag.flag-is { background-position: -128px -66px; } .flag.flag-hu { background-position: -224px -55px; } .flag.flag-rs { background-position: -80px -121px; } .flag.flag-md { background-position: -96px -88px; } .flag.flag-hn { background-position: -176px -55px; } .flag.flag-ne { background-position: -176px -99px; } .flag.flag-mt { background-position: -32px -99px; } .flag.flag-ng { background-position: -208px -99px; } .flag.flag-kg { background-position: -256px -66px; } .flag.flag-je { background-position: -176px -66px; } .flag.flag-in { background-position: -64px -66px; } .flag.flag-hr { background-position: -192px -55px; } .flag.flag-hm { background-position: -160px -55px; } .flag.flag-cm { background-position: -160px -22px; } .flag.flag-uz { background-position: -32px -154px; } .flag.flag-wales { background-position: -160px -154px; } .flag.flag-gm { background-position: -256px -44px; } .flag.flag-li { background-position: -208px -77px; } .flag.flag-nz { background-position: -48px -110px; } .flag.flag-bo { background-position: -160px -11px; } .flag.flag-se { background-position: -208px -121px; } .flag.flag-tm { background-position: -96px -143px; } .flag.flag-cg { background-position: -80px -22px; } .flag.flag-ir { background-position: -112px -66px; } .flag.flag-dk { background-position: -64px -33px; } .flag.flag-gf { background-position: -160px -44px; } .flag.flag-bi { background-position: -96px -11px; } .flag.flag-pe { background-position: -96px -110px; } .flag.flag-ua { background-position: -224px -143px; } .flag.flag-af { background-position: -32px 0; } .flag.flag-ls { background-position: -256px -77px; } .flag.flag-lt { background-position: 0 -88px; } 
        body { font-family: Lato; background-color: #F5F5F5; }    

Countries linked by Border

// Acknowledgements: // Excelent D3 V4 tutorial: http://www.puzzlr.org/force-graphs-with-d3/ // Drag Example: https://github.com/jenovs/chingu-fcc-speedrun-challenge/blob/master/data-vis/force-directed-graph/src/components/ForceGraph/ForceGraph.js d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json", function(error, json) { if (error) { return console.warn(error); } const data = json; const nodes = data.nodes; const links = data.links; const margin = { top: 0, right: 0, bottom: 0, left: 0 } const w = 1250 - margin.left - margin.right; const h = 550 - margin.top - margin.bottom; const results = d3.select('#results') const svg = results.append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); const simulation = d3.forceSimulation() .nodes(nodes) .force("charge_force", d3.forceManyBody().strength(-3)) .force("center_force", d3.forceCenter(w / 2, h / 2)); const div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter().append("line") .attr('stroke', 'black') .attr("stroke-width", 2); const node = results.select('#flags').selectAll('.node') .data(data.nodes) .enter() .append('img') .attr('class', d => 'flag flag-' + d.code) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div .html(d.country) .style("left", (d3.event.pageX - 7) + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }).call(d3.drag() .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded)); const link_force = d3.forceLink(links) simulation.force("links", link_force) simulation.on("tick", tickActions); function tickActions() { node .attr("transform", function(d) { return "translate(" + dx + "," + dy + ")" }); link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); } function dragStarted(d) { if (!d3.event.active) sim.alphaTarget(0.3).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragEnded(d) { if (!d3.event.active) sim.alphaTarget(0); d.fx = null; d.fy = null; } });

Se hacen algunos cambios al código y parecen estar funcionando ahora.

  1. El atributo de posición de los indicadores que contienen div y la clase de indicador se establece en absoluto.
  2. etiqueta se agregó dos veces. Se eliminó el código adicional.
  3. Error de error – Cambiar sim a simulation en los métodos dragstart y dragend.
  4. flags div no está dentro svg. Así que cambie de result.select("#flags") a d3.select("#flags")

    etc.

 d3.json("https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json", function(error, json) { if (error) { return console.warn(error); } const data = json; const nodes = data.nodes; const links = data.links; const margin = { top: 0, right: 0, bottom: 0, left: 0 } const w = 1200 - margin.left - margin.right; const h = 550 - margin.top - margin.bottom; const results = d3.select('#results') const svg = results.append("svg") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom); const simulation = d3.forceSimulation() .nodes(nodes) .force("charge_force", d3.forceManyBody().strength(-3)) .force("center_force", d3.forceCenter(w / 2, h / 2)); const div = d3.select("body") .append("div") .attr("class", "tooltip") .style("opacity", 0); const link = svg.append("g") .attr("class", "links") .selectAll("line") .data(links) .enter().append("line") .attr('stroke', 'black') .attr("stroke-width", 2); const node = d3.select('#flags').selectAll('.node') .data(nodes) .enter() .append('img') .attr('class', d => 'flag flag-' + d.code) .on("mouseover", function(d) { div.transition() .duration(200) .style("opacity", .9); div.html(d.country) .style("left", (d3.event.pageX - 7) + "px") .style("top", (d3.event.pageY - 30) + "px"); }) .on("mouseout", function(d) { div.transition() .duration(500) .style("opacity", 0); }).call(d3.drag() .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded)) const link_force = d3.forceLink(links) simulation.force("links", link_force) simulation.on("tick", tickActions); function tickActions() { node.style('left', d => (dx + 6) + "px") .style('top', d => (dy - 5) + "px"); link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); } function dragStarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = dx; d.fy = dy; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragEnded(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } }); 
 body { font-family: Lato; background-color: #F5F5F5; } .title { margin-top: 10px; margin-bottom: 10px; } #results { text-align: center; } #flags { margin-top: -50px; } #results { background-color: white; width: 1200px; height: 550px; box-shadow: 2px 2px 2px black; } div.tooltip { color: white; position: absolute; text-align: center; padding: 5px; font: 12px sans-serif; background: black; border: 0px; border-radius: 8px; pointer-events: none; } /*! * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/) */ .flag { width: 16px; height: 11px; background: url(http://sofes.miximages.com/javascript/flags.png) no-repeat; position: absolute; } .flags { position: absolute; } .flag.flag-ad { background-position: -16px 0 } .flag.flag-ae { background-position: -32px 0 } .flag.flag-af { background-position: -48px 0 } .flag.flag-ag { background-position: -64px 0 } .flag.flag-ai { background-position: -80px 0 } .flag.flag-al { background-position: -96px 0 } .flag.flag-am { background-position: -112px 0 } .flag.flag-an { background-position: -128px 0 } .flag.flag-ao { background-position: -144px 0 } .flag.flag-ar { background-position: -160px 0 } .flag.flag-as { background-position: -176px 0 } .flag.flag-at { background-position: -192px 0 } .flag.flag-au { background-position: -208px 0 } .flag.flag-aw { background-position: -224px 0 } .flag.flag-az { background-position: -240px 0 } .flag.flag-ba { background-position: 0 -11px } .flag.flag-bb { background-position: -16px -11px } .flag.flag-bd { background-position: -32px -11px } .flag.flag-be { background-position: -48px -11px } .flag.flag-bf { background-position: -64px -11px } .flag.flag-bg { background-position: -80px -11px } .flag.flag-bh { background-position: -96px -11px } .flag.flag-bi { background-position: -112px -11px } .flag.flag-bj { background-position: -128px -11px } .flag.flag-bm { background-position: -144px -11px } .flag.flag-bn { background-position: -160px -11px } .flag.flag-bo { background-position: -176px -11px } .flag.flag-br { background-position: -192px -11px } .flag.flag-bs { background-position: -208px -11px } .flag.flag-bt { background-position: -224px -11px } .flag.flag-bv { background-position: -240px -11px } .flag.flag-bw { background-position: 0 -22px } .flag.flag-by { background-position: -16px -22px } .flag.flag-bz { background-position: -32px -22px } .flag.flag-ca { background-position: -48px -22px } .flag.flag-catalonia { background-position: -64px -22px } .flag.flag-cd { background-position: -80px -22px } .flag.flag-cf { background-position: -96px -22px } .flag.flag-cg { background-position: -112px -22px } .flag.flag-ch { background-position: -128px -22px } .flag.flag-ci { background-position: -144px -22px } .flag.flag-ck { background-position: -160px -22px } .flag.flag-cl { background-position: -176px -22px } .flag.flag-cm { background-position: -192px -22px } .flag.flag-cn { background-position: -208px -22px } .flag.flag-co { background-position: -224px -22px } .flag.flag-cr { background-position: -240px -22px } .flag.flag-cu { background-position: 0 -33px } .flag.flag-cv { background-position: -16px -33px } .flag.flag-cw { background-position: -32px -33px } .flag.flag-cy { background-position: -48px -33px } .flag.flag-cz { background-position: -64px -33px } .flag.flag-de { background-position: -80px -33px } .flag.flag-dj { background-position: -96px -33px } .flag.flag-dk { background-position: -112px -33px } .flag.flag-dm { background-position: -128px -33px } .flag.flag-do { background-position: -144px -33px } .flag.flag-dz { background-position: -160px -33px } .flag.flag-ec { background-position: -176px -33px } .flag.flag-ee { background-position: -192px -33px } .flag.flag-eg { background-position: -208px -33px } .flag.flag-eh { background-position: -224px -33px } .flag.flag-england { background-position: -240px -33px } .flag.flag-er { background-position: 0 -44px } .flag.flag-es { background-position: -16px -44px } .flag.flag-et { background-position: -32px -44px } .flag.flag-eu { background-position: -48px -44px } .flag.flag-fi { background-position: -64px -44px } .flag.flag-fj { background-position: -80px -44px } .flag.flag-fk { background-position: -96px -44px } .flag.flag-fm { background-position: -112px -44px } .flag.flag-fo { background-position: -128px -44px } .flag.flag-fr { background-position: -144px -44px } .flag.flag-ga { background-position: -160px -44px } .flag.flag-gb { background-position: -176px -44px } .flag.flag-gd { background-position: -192px -44px } .flag.flag-ge { background-position: -208px -44px } .flag.flag-gf { background-position: -224px -44px } .flag.flag-gg { background-position: -240px -44px } .flag.flag-gh { background-position: 0 -55px } .flag.flag-gi { background-position: -16px -55px } .flag.flag-gl { background-position: -32px -55px } .flag.flag-gm { background-position: -48px -55px } .flag.flag-gn { background-position: -64px -55px } .flag.flag-gp { background-position: -80px -55px } .flag.flag-gq { background-position: -96px -55px } .flag.flag-gr { background-position: -112px -55px } .flag.flag-gs { background-position: -128px -55px } .flag.flag-gt { background-position: -144px -55px } .flag.flag-gu { background-position: -160px -55px } .flag.flag-gw { background-position: -176px -55px } .flag.flag-gy { background-position: -192px -55px } .flag.flag-hk { background-position: -208px -55px } .flag.flag-hm { background-position: -224px -55px } .flag.flag-hn { background-position: -240px -55px } .flag.flag-hr { background-position: 0 -66px } .flag.flag-ht { background-position: -16px -66px } .flag.flag-hu { background-position: -32px -66px } .flag.flag-ic { background-position: -48px -66px } .flag.flag-id { background-position: -64px -66px } .flag.flag-ie { background-position: -80px -66px } .flag.flag-il { background-position: -96px -66px } .flag.flag-im { background-position: -112px -66px } .flag.flag-in { background-position: -128px -66px } .flag.flag-io { background-position: -144px -66px } .flag.flag-iq { background-position: -160px -66px } .flag.flag-ir { background-position: -176px -66px } .flag.flag-is { background-position: -192px -66px } .flag.flag-it { background-position: -208px -66px } .flag.flag-je { background-position: -224px -66px } .flag.flag-jm { background-position: -240px -66px } .flag.flag-jo { background-position: 0 -77px } .flag.flag-jp { background-position: -16px -77px } .flag.flag-ke { background-position: -32px -77px } .flag.flag-kg { background-position: -48px -77px } .flag.flag-kh { background-position: -64px -77px } .flag.flag-ki { background-position: -80px -77px } .flag.flag-km { background-position: -96px -77px } .flag.flag-kn { background-position: -112px -77px } .flag.flag-kp { background-position: -128px -77px } .flag.flag-kr { background-position: -144px -77px } .flag.flag-kurdistan { background-position: -160px -77px } .flag.flag-kw { background-position: -176px -77px } .flag.flag-ky { background-position: -192px -77px } .flag.flag-kz { background-position: -208px -77px } .flag.flag-la { background-position: -224px -77px } .flag.flag-lb { background-position: -240px -77px } .flag.flag-lc { background-position: 0 -88px } .flag.flag-li { background-position: -16px -88px } .flag.flag-lk { background-position: -32px -88px } .flag.flag-lr { background-position: -48px -88px } .flag.flag-ls { background-position: -64px -88px } .flag.flag-lt { background-position: -80px -88px } .flag.flag-lu { background-position: -96px -88px } .flag.flag-lv { background-position: -112px -88px } .flag.flag-ly { background-position: -128px -88px } .flag.flag-ma { background-position: -144px -88px } .flag.flag-mc { background-position: -160px -88px } .flag.flag-md { background-position: -176px -88px } .flag.flag-me { background-position: -192px -88px } .flag.flag-mg { background-position: -208px -88px } .flag.flag-mh { background-position: -224px -88px } .flag.flag-mk { background-position: -240px -88px } .flag.flag-ml { background-position: 0 -99px } .flag.flag-mm { background-position: -16px -99px } .flag.flag-mn { background-position: -32px -99px } .flag.flag-mo { background-position: -48px -99px } .flag.flag-mp { background-position: -64px -99px } .flag.flag-mq { background-position: -80px -99px } .flag.flag-mr { background-position: -96px -99px } .flag.flag-ms { background-position: -112px -99px } .flag.flag-mt { background-position: -128px -99px } .flag.flag-mu { background-position: -144px -99px } .flag.flag-mv { background-position: -160px -99px } .flag.flag-mw { background-position: -176px -99px } .flag.flag-mx { background-position: -192px -99px } .flag.flag-my { background-position: -208px -99px } .flag.flag-mz { background-position: -224px -99px } .flag.flag-na { background-position: -240px -99px } .flag.flag-nc { background-position: 0 -110px } .flag.flag-ne { background-position: -16px -110px } .flag.flag-nf { background-position: -32px -110px } .flag.flag-ng { background-position: -48px -110px } .flag.flag-ni { background-position: -64px -110px } .flag.flag-nl { background-position: -80px -110px } .flag.flag-no { background-position: -96px -110px } .flag.flag-np { background-position: -112px -110px } .flag.flag-nr { background-position: -128px -110px } .flag.flag-nu { background-position: -144px -110px } .flag.flag-nz { background-position: -160px -110px } .flag.flag-om { background-position: -176px -110px } .flag.flag-pa { background-position: -192px -110px } .flag.flag-pe { background-position: -208px -110px } .flag.flag-pf { background-position: -224px -110px } .flag.flag-pg { background-position: -240px -110px } .flag.flag-ph { background-position: 0 -121px } .flag.flag-pk { background-position: -16px -121px } .flag.flag-pl { background-position: -32px -121px } .flag.flag-pm { background-position: -48px -121px } .flag.flag-pn { background-position: -64px -121px } .flag.flag-pr { background-position: -80px -121px } .flag.flag-ps { background-position: -96px -121px } .flag.flag-pt { background-position: -112px -121px } .flag.flag-pw { background-position: -128px -121px } .flag.flag-py { background-position: -144px -121px } .flag.flag-qa { background-position: -160px -121px } .flag.flag-re { background-position: -176px -121px } .flag.flag-ro { background-position: -192px -121px } .flag.flag-rs { background-position: -208px -121px } .flag.flag-ru { background-position: -224px -121px } .flag.flag-rw { background-position: -240px -121px } .flag.flag-sa { background-position: 0 -132px } .flag.flag-sb { background-position: -16px -132px } .flag.flag-sc { background-position: -32px -132px } .flag.flag-scotland { background-position: -48px -132px } .flag.flag-sd { background-position: -64px -132px } .flag.flag-se { background-position: -80px -132px } .flag.flag-sg { background-position: -96px -132px } .flag.flag-sh { background-position: -112px -132px } .flag.flag-si { background-position: -128px -132px } .flag.flag-sk { background-position: -144px -132px } .flag.flag-sl { background-position: -160px -132px } .flag.flag-sm { background-position: -176px -132px } .flag.flag-sn { background-position: -192px -132px } .flag.flag-so { background-position: -208px -132px } .flag.flag-somaliland { background-position: -224px -132px } .flag.flag-sr { background-position: -240px -132px } .flag.flag-ss { background-position: 0 -143px } .flag.flag-st { background-position: -16px -143px } .flag.flag-sv { background-position: -32px -143px } .flag.flag-sx { background-position: -48px -143px } .flag.flag-sy { background-position: -64px -143px } .flag.flag-sz { background-position: -80px -143px } .flag.flag-tc { background-position: -96px -143px } .flag.flag-td { background-position: -112px -143px } .flag.flag-tf { background-position: -128px -143px } .flag.flag-tg { background-position: -144px -143px } .flag.flag-th { background-position: -160px -143px } .flag.flag-tibet { background-position: -176px -143px } .flag.flag-tj { background-position: -192px -143px } .flag.flag-tk { background-position: -208px -143px } .flag.flag-tl { background-position: -224px -143px } .flag.flag-tm { background-position: -240px -143px } .flag.flag-tn { background-position: 0 -154px } .flag.flag-to { background-position: -16px -154px } .flag.flag-tr { background-position: -32px -154px } .flag.flag-tt { background-position: -48px -154px } .flag.flag-tv { background-position: -64px -154px } .flag.flag-tw { background-position: -80px -154px } .flag.flag-tz { background-position: -96px -154px } .flag.flag-ua { background-position: -112px -154px } .flag.flag-ug { background-position: -128px -154px } .flag.flag-um { background-position: -144px -154px } .flag.flag-us { background-position: -160px -154px } .flag.flag-uy { background-position: -176px -154px } .flag.flag-uz { background-position: -192px -154px } .flag.flag-va { background-position: -208px -154px } .flag.flag-vc { background-position: -224px -154px } .flag.flag-ve { background-position: -240px -154px } .flag.flag-vg { background-position: 0 -165px } .flag.flag-vi { background-position: -16px -165px } .flag.flag-vn { background-position: -32px -165px } .flag.flag-vu { background-position: -48px -165px } .flag.flag-wales { background-position: -64px -165px } .flag.flag-wf { background-position: -80px -165px } .flag.flag-ws { background-position: -96px -165px } .flag.flag-xk { background-position: -112px -165px } .flag.flag-ye { background-position: -128px -165px } .flag.flag-yt { background-position: -144px -165px } .flag.flag-za { background-position: -160px -165px } .flag.flag-zanzibar { background-position: -176px -165px } .flag.flag-zm { background-position: -192px -165px } .flag.flag-zw { background-position: -208px -165px } 
         

Countries linked by Border

In your code above you are attempting to parent an HTML img tag to an SVG parent. This will never work . In the question I linked to in the comments, that OP attempted to solve this problem by using the foreignObject tag (which then allows HTML content inside it). As you mentioned, this is evil and should be avoided. So, my solution in the linked question was to set up some svg patterns that allow you to take your single sprite image and transform it to the proper coordinates for each flag. Here is that approach with your code base…

Full code here (that stack snippet was too big so I had to remove some flags).

        

Countries linked by Border