Html - Scale SVG segment without it moving

Jet
April 6, 2024
186 views
1 vote
2 Answers

So I have a SVG of Portugal with its districts and when any of its districts is clicked, it goes to the left of the map, close to the center.

The problem is that when I try to scale up that disctrict that was clicked it just flys aways of screen.

What I want:
Scale the selected district twice or 3 times and it goes to where it is supposed to go

Here is the code:

const svg        = document.querySelector("svg");
const paths      = document.querySelectorAll("svg path");
const popUp      = document.querySelector(".pop");
let selectedPath = null;


function calcCenterMove(element) {

  /*
  X and Y are the current position of the element to be moved (top left corner).
  Width and Height are the width and height of the element to be moved.
  CX and CY are the X and Y coordinates of the centre of the screen.
  */

  var x       = element.getBoundingClientRect().x * 2;
  var y       = element.getBoundingClientRect().y * 2;
  var width   = element.getBoundingClientRect().width * 2;
  var height  = element.getBoundingClientRect().height * 2;
  var cx      = window.innerWidth / 2;
  var cy      = window.innerHeight / 2;
  var xVector = cx - (width / 2) - x;
  var yVector = cy - (height / 2) - y;
  var xVector = xVector / 10;
  var yVector = yVector / 5;

  return [xVector, yVector];
}

function removeSvg() {
  const e = document.getElementById("teste_svg");
  e.remove();
}


for (const path of paths) {
  path.addEventListener("click", (event) => {
    if (selectedPath === path) return; // Don't change if clicking the same path again
    selectedPath = path;

    paths.forEach(otherPath => {
      if (otherPath !== selectedPath) {
        otherPath.style.opacity       = "0.4"
        otherPath.style.fill          = "lightgray"; // Reduce opacity for unselected paths
        otherPath.style.pointerEvents = "none";
      }
    });
    var xAxisMove = calcCenterMove(selectedPath)[0];
    var yAxisMove = calcCenterMove(selectedPath)[1];
    path.style = "transform: translate(" + xAxisMove + "px," + yAxisMove + "px);";
    path.classList.add("selected");

    path.style.pointerEvents = "auto";



    if (selectedPath != null) {
      document.documentElement.addEventListener("click", captureClick, true);
    }

  });

  function captureClick(event) {
    if (!event.target.classList.contains("selected")) {
      for (const path of paths) {
        path.classList.remove("selected");
        path.style.opacity       = 1;
        path.style.pointerEvents = "auto";
        path.style.fill          = "gray";

      }
      selectedPath.style = "transform: translate(0 px,0 px);";
      selectedPath       = null;
      document.documentElement.removeEventListener("click", captureClick, true);
    }
  }

  path.addEventListener("mouseenter", (event) => {
    const pathId        = event.target.getAttribute("title");
    popUp.querySelector("p").textContent = `Content for path: ${pathId}`;
    const pathRect      = event.target.getBoundingClientRect();
    popUp.style.top     = `${pathRect.top + pathRect.height / 2}px`;
    popUp.style.left    = `${pathRect.left + pathRect.width / 2}px`;
    popUp.style.opacity = 0.8;
  });

  path.addEventListener("mouseenter", (event) => {

    const districtName = event.target.id;

    event.target.style.fill = "red";
  });

  path.addEventListener("mouseleave", () => {
    event.target.style.fill = "";

    popUp.style.opacity = 0;
  });
}

.hoverme {
  display: none;
}

body {
  background: white;
  font-family: 'Open Sans Hebrew', Arial, sans-serif;
  text-align: center;
}

.div-svg {
  float: right;
}

svg {
  position: relative;
  height: auto;
  transform: translate(400px, 35px);
}

svg path {
  fill: gray;
  cursor: pointer;
  transition: all 0.3s ease;
}

svg path.selected {
  fill: #007bff;
  transition: all 0.3s ease;
}

svg path:hover {
  fill: rgba(black, 0.3);
  .pop {
    opacity: 1;
    width: 200px;
    height: 200px;
  }
}

.pop {
  pointer-events: none;
  position: absolute;
  transition: all 0.3s ease;
  background-color: lightblue;
}

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div class="div-svg">
  <svg viewBox="687.7681 0.4499 100 211.98" xmlns="http://www.w3.org/2000/svg" width="1080px" height="400">
    <path id="PT-01" title="Aveiro" d="m 714.77803,48.33988 1.23,-0.41 0.14,0.72 1.4,-0.29 0.91,-1.04 0.42,1.03 0.65,0.22 0.09,-0.5 0.79,-0.33 -0.82,-0.39 0.2,-0.55 0.93,0.43 0.25,-0.46 0.59,1.29 1.29,0.88 0.19,-0.9 -0.55,-0.38 0.06,-0.84 1.62,0.49 1.68,-1.65 0.95,0.6 0,0 0.85,0.34 0.2,1.26 -0.32,0.09 0.2,0.56 0.96,0.07 -0.28,0.67 0.59,-0.17 1.92,0.82 1.09,-1.45 0.25,0.19 0.06,0.89 -1.37,1.65 0.15,2.07 0.79,1.3 -0.84,0.75 -1.19,-0.72 -0.73,0.83 -1.28,-0.77 -0.76,0.37 0.57,1.27 -1.13,2.85 -1.88,0.71 0.19,1.19 0.92,0.75 0.08,2.41 1.55,0.78 -1.99,0.83 0.74,2.38 1.1,1.16 -2.7,1.04 0.57,1.85 -1.18,1.34 -0.04,1.72 0,0 -0.05,0.82 -0.55,0.25 -0.94,-0.44 -0.14,1.16 -1.24,0.26 -0.18,1.58 -1.07,-0.54 -1.12,0.07 -0.2,-1.04 1.42,0.01 0.12,-2.9 -0.74,-0.59 0,-0.92 -2.14,0.91 -0.07,-2.67 -0.29,-0.59 -0.98,-0.27 -0.53,0.82 -0.11,1.63 -0.88,-0.09 0,0 -1.23,-1.27 0,0 -2.6,-2.53 0,0 1.01,-4.22 0.07,-0.74 -0.44,-0.14 2.58,-8.59 1.19,-6.92 z"/>
    <path id="PT-02" title="Beja" d="m 729.94803,158.52988 0.39,-0.38 0.66,0.66 2.4,-0.62 1.44,1.16 0.89,-0.75 4.5,2.66 2.52,0.21 2.83,1.85 1.09,-0.37 1.44,0.23 0.7,0.6 2.19,0.01 0.06,-0.73 1.01,-0.41 0,0 0.82,-1.04 0,0 0.18,-0.7 0.73,-0.27 0.39,-0.92 -0.31,-0.33 1.61,-0.04 0.59,-0.86 1.57,-0.41 1.36,2.72 1.71,0.67 -0.28,0.9 1.24,2.57 0.3,0.12 -0.06,-0.67 0.69,0.08 0,0 0.71,-0.66 0,0 0,0 0,0 0.74,0.75 0.57,-0.69 0.22,0.35 0.97,-0.19 0.55,-0.88 0.97,-0.27 0.27,0.37 1.14,-0.72 0.06,0.73 -1.11,1.42 0.53,0.55 -0.58,1.68 -0.54,0.34 -0.45,3.18 -1.41,0.33 -1.64,-1.18 -0.94,0.57 0.24,0.99 -1.66,0.47 -0.91,-0.42 -1.91,0.94 0.45,1 -0.21,1.28 -0.86,1 -0.04,1.14 -1.29,2.12 -2.28,2.06 -0.78,0.2 -0.84,2.45 0.14,1.3 -0.39,0.1 0.04,0.62 -0.4,-0.12 -0.68,1.81 -0.48,-0.04 -0.09,1.91 -0.5,0.04 0.32,1.17 0,0 -1.95,-0.11 -1.39,1.47 -1.81,-0.55 -2.47,1.03 -0.36,-0.31 0.06,0.34 -1.55,0.92 -0.33,-0.25 -0.32,0.55 -0.63,-0.03 -0.1,0.46 -1.12,0.11 0.02,0.77 -0.36,-0.09 -0.17,0.52 -0.53,-0.37 -0.48,0.4 -1.34,-0.13 -0.78,1.17 0.51,0.57 -1.16,0.32 -1.21,1.42 -3.88,-0.9 -1.9,-1.71 -0.83,-0.08 0.32,-0.82 -0.4,-0.69 -1.34,-0.54 -0.29,0.61 -0.24,-0.38 -2.57,0.54 -0.12,1 -0.92,0.69 -2.02,-0.08 -1.74,-1.29 -1.45,0.37 -0.74,1.04 -0.78,-1 -2.19,0.22 -0.51,-1.45 -1.47,-0.44 0,0 0.33,-3.56 -1.07,-2.64 1.06,-4.55 -0.84,-1.39 0.62,-2.81 0,0 0.53,0.58 1.29,-0.39 1.64,2.44 0.71,-0.6 1.38,0.76 0.33,-0.43 0.62,0.13 0.11,-1.69 0.55,-0.77 0.54,0.11 -0.07,-1.25 0.44,-0.24 3.06,-0.27 0.19,-0.43 3.28,0.95 -0.14,-0.77 1.13,-1.3 -0.31,-0.5 0.49,-3.26 -0.8,-1.31 -1.42,0.17 -1.44,-2.03 0.66,-1.69 0.8,0.45 0.24,-1.39 0.55,-0.1 0.15,-0.57 0.72,0.69 0.62,-0.04 0.21,-1.9 1.41,0.29 0.61,-0.93 2.86,-0.86 0.01,-1.69 z"/>
    <path id="PT-03" title="Braga" d="m 733.52803,14.62988 -0.34,2.48 -0.83,2.02 -0.99,0.99 2.6,-0.49 1.52,0.67 -0.26,3.43 3.66,0.65 0.96,-1.14 1.27,1.76 -0.31,0.72 -0.59,0.12 0.07,0.71 -0.85,0.5 0.08,0.53 -1.01,-0.07 -0.29,1.02 -1.12,0.48 -0.1,1.98 -1.26,1.5 0.43,0.12 -0.21,0.71 0,0 -0.46,1.17 -1.33,1.19 -1.09,-1.02 -0.67,0.58 -1.05,-0.58 -0.84,-0.72 0.21,-0.73 -0.6,-0.14 -0.22,-0.81 -1.51,-0.48 -0.28,0.77 -0.75,-0.03 -1,1.04 -0.3,1.19 -0.92,-0.43 -0.3,-1.07 -2.15,0.63 0.31,-0.8 -0.48,-0.14 -1.01,0.89 -0.77,-0.53 -1.44,0.3 -0.54,0.95 -2.91,0.2 0,0 -0.4,-1.75 0.41,-0.36 0,0 0.62,-0.37 -0.46,-0.52 -1.42,-0.3 -0.62,-1.07 -0.98,0.13 -1.42,-1.11 -0.93,-0.11 0,0 -1.09,-5.93 0,0 1.67,-0.09 1.9,-1.11 1.03,-0.07 0.41,0.47 0.25,-0.98 1.23,0.85 0.85,-0.36 0.46,0.81 0.7,-0.32 -0.21,-1.35 0.81,-0.68 0.1,-1.96 0.53,-0.53 0.46,-0.05 0.04,0.53 0.77,-0.22 1.17,-1.05 1.56,-0.55 0.77,0.44 1.39,-0.06 0.39,-0.83 0.71,0.41 2.39,-1.74 0.91,0.21 0.07,-0.45 0,0 2.25,0.43 z"/>
    <path id="PT-04" title="Bragança" d="m 773.03803,7.44988 0.99,0.22 0.57,1.71 0.76,0.28 3.32,-0.12 1.05,-1.17 1.22,0.97 -0.68,2.58 1.75,0.5 -0.88,3.94 -0.8,1.47 0.41,0.26 0.45,2.4 1.33,0.98 1.33,-0.4 0.41,-0.77 4.49,0.97 1.51,1.22 0.59,1.09 1.08,0.52 0.39,0.84 -1.51,2.24 -0.66,0.31 0.22,0.58 -0.47,0.08 0.13,0.49 -0.71,0.32 -0.67,1.23 0.17,0.88 -1.05,0.77 0.49,1.04 -1.1,0.31 -0.44,-0.64 -0.73,0.37 -0.12,0.62 0.52,0.44 -1.21,0.48 -0.71,1.79 -1.55,0.58 0.27,0.65 -0.57,0.41 -0.83,-0.4 -1.54,1.53 -0.64,-0.68 -0.26,0.49 -1.53,-0.17 -1.36,1.59 -0.56,1.55 -1.86,1.58 0.44,1.28 -1.73,2.82 -1.88,0.4 -1.51,-0.48 -0.48,0.38 0,0 -1.19,-0.29 -0.72,0.47 -0.19,-0.49 -1.44,-0.31 -0.47,-0.78 -1.37,-0.73 -0.02,-1.01 0.59,-0.89 -1.47,-0.49 0.49,-0.55 -0.08,-1.19 -1.47,2.22 -2.71,-0.79 -1.73,0.23 0,0 -1.68,-0.35 -1.04,-1.98 -1.31,-0.65 0,0 0.56,-1.57 0.85,0.16 -0.13,-1.73 0.93,-0.76 -0.42,-0.44 0.61,-0.7 1.31,-0.3 -1.48,-1.11 0.28,-0.49 -0.45,-1.62 0,0 0.05,-1.06 0,0 2.11,-1.01 -0.1,-0.97 0.56,-1.18 1.73,-0.3 -0.93,-1.7 -0.01,-1.18 1.58,-5.09 1.16,-1.37 0.03,-1.06 -0.72,-0.52 0,0 -0.52,-1.34 0,0 0.31,-2.77 0,0 0.86,-1.67 -0.51,-0.95 0.13,-1.3 1.39,-0.78 1.7,0.73 0.49,1 2.08,-0.03 0.85,-0.99 0.68,0.21 0.42,1.03 1.65,0.2 2.23,-0.26 0.32,-1.97 z"/>
    <path id="PT-05" title="Castelo Branco" d="m 742.01803,80.91988 1.53,-0.29 0.76,-0.99 1.7,-0.53 1.17,-1.07 0.32,-0.99 0.87,0.51 1.39,-0.27 0.7,-2.1 0.88,-1.08 0.8,-0.29 0.46,0.62 0.68,-0.21 0.99,0.46 1.1,-0.48 0.46,0.44 0.55,-1.2 0.66,0.31 0.43,-0.53 0.71,0.34 -0.1,2.5 -1.04,1.79 -0.82,0.42 0.43,0.54 2.49,0.92 0.87,-1.14 1.62,0.72 0.8,-0.59 0.17,-1.21 0.59,-0.51 0.89,1.9 1.67,0.01 0.53,-0.49 1.98,1.35 0,0 -0.38,0.79 -1.56,0.53 -0.54,1.61 0.42,0.41 -0.15,1.34 0.89,1.29 1.65,0 0.75,1.91 0.78,0.24 0.9,1.98 -0.72,1.34 0.06,1.59 -0.69,0.69 0.1,2.18 -1.42,1.77 -1.22,0.71 0.33,1.54 -1.23,4.17 -4.29,0.71 -3.16,-0.56 -2.59,1.06 -3.85,-0.88 -2.72,-0.05 0,0 -1.29,0.25 -1.74,1.42 -1.08,-1.07 -1,0.51 -0.6,1.77 -1.03,0.2 -0.47,0.98 -1.74,1.1 0,0 0.46,-1.35 0,0 -0.38,-0.76 0,0 -1.33,-2.01 -0.87,-0.21 -0.71,-1.03 -1.36,0.29 0.13,-2.26 -0.52,-1.17 -0.64,0.69 -0.51,-0.62 -0.97,-0.17 -0.55,0.49 -0.11,2.61 -0.6,0.54 0.69,1.69 -2.51,0.25 -3.21,-1.38 0.23,-4.42 -0.44,-1.05 -0.71,0.41 -0.62,-1.07 0,0 0,-0.03 0,0 -0.25,-0.53 0.66,-0.44 -0.1,-0.94 1.51,-0.56 0.55,0.21 0.75,-1.25 0.56,0.25 0.61,-0.41 0.96,-2 0,0 0.12,-0.6 1.02,0.07 -0.11,-0.75 0.64,0.44 0.3,-0.62 0.74,0.37 0.05,-0.99 0.45,0.56 0.38,-0.06 -0.27,-0.69 0.51,0.46 0.64,-0.45 0.44,0.49 0.33,-1.04 1.61,-0.01 -0.44,-1.23 1.63,-1.04 1.24,0.3 0.53,0.62 0.06,-1.42 0,0 0.31,-0.29 -0.66,0.03 0,0 0.96,-0.38 0.43,0.89 0.96,-1.15 -0.27,-0.32 0.62,-0.25 -0.14,-0.76 -1.9,-1.52 -0.4,-0.84 z"/>
    <path id="PT-06" title="Coimbra" d="m 710.37803,68.91988 2.6,2.53 0,0 1.23,1.27 0,0 0.88,0.09 0.11,-1.63 0.53,-0.82 0.97,0.27 0.29,0.59 0.08,2.67 2.13,-0.91 0,0.92 0.74,0.59 -0.11,2.9 -1.42,-0.01 0.2,1.04 1.12,-0.07 1.06,0.54 0.18,-1.58 1.24,-0.27 0.14,-1.16 0.94,0.44 0.55,-0.25 0.05,-0.82 0,0 0.42,-0.11 0.44,0.63 0.93,-0.14 1.54,1.44 1.83,-0.83 0.25,0.4 0.45,-0.47 1.16,0.49 2.89,-2.16 2.17,-0.81 2.83,-2.81 1.76,-1.05 0,0 0.04,0.69 0.96,1.01 -0.44,0.74 -1.18,0.44 0.09,0.61 0.58,0.45 0.94,-0.08 -0.25,2.3 1.48,0.73 -0.23,0.63 -1.23,0.36 -0.68,1.73 1.38,1.48 0,0 -0.85,1.98 0.4,0.84 1.9,1.52 0.14,0.76 -0.62,0.25 0.27,0.32 -0.96,1.15 -0.43,-0.89 -0.96,0.38 0,0 0.66,-0.03 -0.31,0.29 0,0 -0.06,1.42 -0.53,-0.62 -1.24,-0.3 -1.63,1.04 0.44,1.23 -1.61,0.01 -0.33,1.04 -0.44,-0.49 -0.64,0.45 -0.51,-0.46 0.27,0.69 -0.38,0.06 -0.45,-0.56 -0.05,0.99 -0.74,-0.37 -0.3,0.62 -0.64,-0.44 0.11,0.75 -1.02,-0.07 -0.12,0.6 0,0 -0.43,-0.24 0.71,-1.3 -1.45,-2.07 0.38,-2.09 -1.11,-0.69 -0.97,1.54 -1.03,-0.62 -1.06,0.9 -0.7,1.48 0.87,0.83 -0.28,1.22 -1.09,-1.2 -1.89,2.66 -1.11,-0.33 0.92,-0.97 -1.46,-2.92 -0.34,0.44 0.31,0.75 -0.96,-0.83 -1.05,1.3 -1,0.07 -0.52,1.46 -0.73,-3.25 -0.94,0.02 -0.74,1.45 -0.88,0.08 0.06,-0.85 -1.09,-0.78 -2.87,-0.45 -1.08,1.17 -1.23,-0.66 -0.92,0.21 -0.8,-0.86 0,0 1.02,-3.83 -1.51,-2.06 2.05,-5.9 z"/>
    <path id="PT-07" title=" Évora" d="m 727.94803,131.64988 0.29,0.37 1.38,-1.72 0.36,0.23 0.36,-0.48 0.61,0.6 0.06,-0.44 0.85,0.01 0.17,0.4 -0.69,0.36 0.55,1.41 0.5,-0.29 0.03,-1.21 0.5,-0.39 1.79,1.39 -0.27,1.64 1.12,-0.14 1.96,-1.23 0.94,1.75 0.57,0.21 0.03,0.72 2.72,0.51 0.14,-0.46 1.05,-0.04 0.61,-1.25 1.1,1.08 0.46,-0.69 1.45,0.73 1.05,-1.71 1.25,0.05 0.71,-0.63 -0.34,-0.99 0.62,-0.64 0.65,0.91 0.87,-0.08 -0.09,0.5 1.11,0.45 -0.42,1.55 1.37,0.91 -0.15,1.07 0.73,1.14 -0.62,0.03 0.6,0.45 0.43,1.43 0.73,-0.4 0.42,0.55 0.85,-0.25 0.08,-0.86 0.6,-0.21 0,0 0.38,-0.41 0,0 0.47,0.52 1.1,-0.81 0.58,0.77 0.6,-0.1 -0.79,1.96 0.91,1.26 0,0 -1.77,1.12 -0.4,3.43 0.91,0.58 -2.24,4.43 -0.22,1.43 0.67,-0.18 0.05,0.53 -1.17,1.36 0.59,-0.18 1.18,0.83 0.26,1 3.21,4.63 0.61,0.14 1.35,3.51 0,0 0,0 0,0 -0.71,0.66 0,0 -0.69,-0.08 0.06,0.67 -0.3,-0.12 -1.24,-2.57 0.28,-0.9 -1.71,-0.67 -1.36,-2.72 -1.57,0.41 -0.59,0.86 -1.61,0.04 0.31,0.33 -0.39,0.92 -0.73,0.27 -0.18,0.7 0,0 -0.82,1.04 0,0 -1.01,0.41 -0.06,0.73 -2.19,-0.01 -0.7,-0.6 -1.44,-0.23 -1.09,0.37 -2.83,-1.85 -2.52,-0.21 -4.5,-2.66 -0.89,0.75 -1.44,-1.16 -2.4,0.62 -0.66,-0.66 -0.39,0.38 0,0 -1.05,-0.91 -2.26,-0.44 -0.25,-0.72 -1.43,-0.03 1.22,-1.6 -0.57,-0.49 0.57,-0.06 -0.24,-0.53 -1,0.09 0.4,-0.87 -1.85,-3.51 -1.71,1 -0.71,-0.26 -0.96,0.43 -0.9,-1.24 -0.49,0.19 0.44,0.95 -0.71,0.32 -0.12,-0.68 -1.27,-0.14 -0.08,-0.66 -2.02,-0.06 -0.45,-2.52 4.81,-4.16 -0.31,-0.82 0.63,-1.03 -1.76,-0.09 0,0 1.46,-1.77 0.95,0.5 1.27,-1.58 0.35,-0.14 0.32,0.59 0.99,-1.35 1.14,0.71 0.64,-0.82 0.35,0.58 0.29,-0.93 1.28,0.99 -0.21,0.33 0.51,0.67 0.9,-0.44 0.79,0.87 -0.24,0.35 0.99,-0.07 -0.13,0.51 1.14,0.62 0.51,-1.23 -0.79,-0.66 -0.3,0.53 -0.2,-0.87 -0.67,-0.37 0.91,-1.17 -0.73,-0.53 -0.82,0.2 -0.08,-0.41 -1.95,-0.92 0.93,-1.24 0,-1.43 z"/>
    <path id="PT-08" title="Faro" d="m 740.65803,210.78988 0.55,0.1 -1.95,1.54 0.45,-1.02 0.95,-0.62 z m -3.7,-0.07 2.27,1.68 -1.73,-0.23 -1.68,-1.24 1.14,-0.21 z m 3.92,-0.63 0.37,0.36 -1.61,0.47 1.24,-0.83 z m -13.05,-2.4 -2.1,0.43 -2.13,-1.16 -2.25,0.64 -3.12,-1.28 -2.55,-0.2 -1.53,0.64 -0.09,1.1 -1.87,-0.3 -1.93,0.93 -1.64,0.09 -0.75,0.73 -0.96,-0.02 -1.69,1.93 -0.5,-1.25 -1.05,0.11 2.95,-5.64 -0.47,-1.23 0.71,-0.4 1.12,-2.47 -0.56,-2.06 1.05,-1.23 1.53,-3.6 0,0 1.47,0.44 0.51,1.45 2.19,-0.22 0.78,1 0.74,-1.04 1.45,-0.37 1.73,1.29 2.02,0.09 0.92,-0.69 0.12,-1 2.57,-0.54 0.24,0.38 0.29,-0.61 1.33,0.54 0.41,0.69 -0.32,0.82 0.83,0.08 1.91,1.71 3.87,0.89 1.21,-1.41 1.16,-0.33 -0.51,-0.57 0.78,-1.17 1.35,0.13 0.47,-0.4 0.53,0.38 0.17,-0.52 0.37,0.09 -0.02,-0.77 1.13,-0.11 0.09,-0.46 0.64,0.03 0.32,-0.55 0.33,0.26 1.55,-0.92 -0.06,-0.34 0.36,0.31 2.48,-1.03 1.8,0.56 1.4,-1.48 1.95,0.11 0,0 0.64,0.16 0.25,0.95 0.64,0.44 -0.16,0.74 0.74,1.95 -0.54,0.41 0.7,0.71 -0.05,3.15 0.65,1.48 -0.38,0.94 0.64,0.98 0.19,2.12 -1.64,-0.22 -3.2,1.01 -7.37,5.39 -1.02,-0.48 -1.39,0.82 0.01,0.84 -0.46,0.15 -1.78,-1.13 -1.33,0.25 -4.04,-2.62 -2.27,-0.8 -1.56,0.28 z"/>
    <path id="PT-09" title="Guarda" d="m 753.52803,52.25988 1.23,0.85 -0.62,0.88 -1.01,-0.59 0.4,-1.14 z m 3.58,-9.08 1.74,-0.23 2.7,0.79 1.47,-2.22 0.09,1.19 -0.49,0.55 1.46,0.49 -0.59,0.89 0.02,1.02 1.37,0.72 0.47,0.78 1.44,0.32 0.19,0.49 0.73,-0.47 1.19,0.29 0,0 0.31,1.12 1.97,2.2 0.32,1.96 1.27,0.85 0.23,0.9 0,0.63 -0.79,0.22 0.32,1.8 -0.45,1.84 1.17,3.8 -1.62,3.95 1.41,0.65 0.18,1.61 -1.72,2.48 0.48,1.81 1.69,1.78 -0.41,1.49 -2.12,1.19 -0.3,1.53 -2.54,0.2 0,0 -1.98,-1.34 -0.52,0.49 -1.68,-0.01 -0.89,-1.9 -0.6,0.51 -0.17,1.21 -0.8,0.59 -1.61,-0.72 -0.87,1.14 -2.49,-0.92 -0.43,-0.55 0.82,-0.42 1.04,-1.79 0.1,-2.5 -0.71,-0.33 -0.44,0.52 -0.66,-0.3 -0.55,1.19 -0.46,-0.43 -1.1,0.48 -0.98,-0.47 -0.68,0.21 -0.45,-0.62 -0.8,0.29 -0.88,1.07 -0.7,2.1 -1.39,0.27 -0.87,-0.51 -0.31,0.98 -1.18,1.08 -1.7,0.53 -0.76,0.99 -1.54,0.29 0,0 -1.37,-1.48 0.68,-1.72 1.23,-0.36 0.23,-0.63 -1.48,-0.72 0.25,-2.3 -0.94,0.08 -0.58,-0.45 -0.1,-0.61 1.18,-0.43 0.44,-0.75 -0.96,-1.01 -0.03,-0.69 0,0 5.14,-2.53 2.67,-0.57 -0.26,-0.5 0.73,-2.48 0.75,-0.58 -0.29,-0.73 0.51,-0.55 -1.76,-0.98 -0.18,-0.62 0.82,-0.85 -1.81,-1.34 1.33,-2.96 0.79,-0.82 1.49,0.12 1.91,2.37 1.59,-2.75 0.74,0.41 0.18,-1.82 0,0 1.2,-0.9 0,0 0.35,-1.58 -1.69,-0.8 -0.01,-0.92 1.31,-0.04 -0.26,-1.34 1.25,-3.92 z"/>
    <path id="PT-10" title="Leiria" d="m 713.46803,107.60988 0,0 0,0 0.48,0.63 -0.77,1.27 -0.6,0.47 -0.61,-0.63 -0.4,0.3 0.55,1.99 -2.31,-0.12 -3.19,0.69 -1.33,3.05 -0.72,-0.13 -0.7,0.72 -0.11,3.25 0,0 -1.01,0.14 -0.41,-0.69 -0.85,0.02 -0.18,0.42 0,0 -1.15,0.95 0,0 -1.08,1.9 -1.11,0.72 -0.77,-1.47 0.49,-0.86 -0.42,-1.36 -1.42,-0.1 -0.32,-0.52 -1.3,1.39 -1.4,-0.34 0,0 -0.76,-2.32 -1.39,-0.44 0.39,-0.44 1.59,0.29 3.33,-2.53 0.93,0.76 -0.36,0.26 1.25,-0.04 -0.55,-0.07 -0.83,-1.33 1.77,-2.64 1.08,-0.15 -0.26,-0.7 2.19,-2.7 0.05,-0.59 -0.39,-0.08 1.14,-4.73 4.95,-13.29 0,0 0.8,0.86 0.92,-0.21 1.24,0.66 1.07,-1.16 2.87,0.44 1.09,0.78 -0.05,0.85 0.88,-0.08 0.74,-1.45 0.94,-0.01 0.72,3.25 0.52,-1.46 1,-0.06 1.05,-1.3 0.96,0.83 -0.31,-0.75 0.34,-0.44 1.46,2.92 -0.91,0.97 1.11,0.33 1.89,-2.66 1.09,1.2 0.28,-1.21 -0.86,-0.83 0.7,-1.48 1.06,-0.9 1.03,0.63 0.97,-1.55 1.12,0.7 -0.39,2.09 1.45,2.07 -0.71,1.3 0.44,0.24 0,0 -0.96,2 -0.61,0.42 -0.56,-0.25 -0.75,1.25 -0.55,-0.21 -1.51,0.56 0.1,0.94 -0.66,0.44 0.25,0.53 0,0 0,0 0,0 -1.49,-0.28 0.11,1.67 -0.5,-0.51 -1.1,0.92 -0.76,-0.34 -1.54,1.2 -0.77,-4.39 -0.91,0.94 -0.43,-0.53 -0.69,1.08 -1.62,1.02 -1.33,-0.53 -1.31,0.66 -0.13,1.11 0.52,0.89 -0.47,0.66 1.43,0.6 -0.49,1.37 -1.67,0.92 0.4,2.34 z"/>
    <path id="PT-11" title="Lisboa" d="m 698.98803,143.04988 -2.24,0.55 -2.05,-0.29 -1.35,1.03 -2.16,-1.16 -1.09,0.51 -1.88,-0.76 0.45,-1.68 -0.9,-1.24 2.6,-6.54 0.25,0.18 -0.55,-2.59 0.18,-2.93 2.41,-5.21 0.14,-3.6 0,0 1.4,0.34 1.31,-1.39 0.32,0.52 1.42,0.11 0.43,1.36 -0.48,0.86 0.77,1.47 1.11,-0.72 1.08,-1.9 0,0 1.15,-0.95 0,0 0.19,-0.42 0.85,-0.02 0.41,0.69 1.01,-0.14 0,0 0.61,0.39 -0.19,1.52 0.59,-0.23 1.61,0.83 1.15,-0.64 0.42,0.83 0.93,0.29 0.2,1.51 -1.7,-0.02 -1.03,0.59 1.44,1.77 2.19,1.3 0.51,1.54 -1.32,1.23 -1.16,-0.03 0.6,0.48 -1.13,1.9 0.84,0.29 -1.28,0.74 -0.63,2.27 -1.82,2.5 0,0 -0.66,-1.03 0.36,-0.62 -0.52,-0.66 -0.02,-2.33 -0.77,2.15 -2.05,2.76 -0.57,3.53 -1.38,1.06 z"/>
    <path id="PT-12" title="Portalegre" d="m 749.75803,104.23988 1.19,2.93 1.21,0.69 0.98,1.56 1.25,0.2 0.27,1.57 0.62,0.4 0.46,-0.27 1.69,1.27 -0.9,3.07 0.48,1.84 2.4,2.35 -0.52,1.01 0.21,1.84 1.06,0.85 2.31,0.65 -0.29,2.54 1.22,0.38 2.29,-0.73 1.64,1.19 0.67,1.35 -0.26,0.61 0.53,0.64 -3.19,4.72 0.6,1.14 -0.2,0.57 -0.92,0.42 -0.88,1.55 -1.39,0.4 -2,2.2 0,0 -0.91,-1.26 0.79,-1.96 -0.6,0.1 -0.58,-0.77 -1.1,0.81 -0.47,-0.52 0,0 -0.38,0.41 0,0 -0.6,0.21 -0.08,0.86 -0.85,0.25 -0.42,-0.55 -0.73,0.4 -0.43,-1.43 -0.6,-0.45 0.62,-0.03 -0.73,-1.14 0.15,-1.07 -1.37,-0.91 0.42,-1.55 -1.11,-0.45 0.09,-0.5 -0.87,0.08 -0.65,-0.91 -0.62,0.64 0.34,0.99 -0.71,0.63 -1.25,-0.05 -1.05,1.71 -1.45,-0.73 -0.46,0.69 -1.1,-1.08 -0.61,1.25 -1.05,0.04 -0.14,0.46 -2.72,-0.51 -0.03,-0.72 -0.57,-0.21 -0.94,-1.75 -1.96,1.23 -1.12,0.14 0.27,-1.64 -1.79,-1.39 -0.5,0.39 -0.03,1.21 -0.5,0.29 -0.55,-1.41 0.69,-0.36 -0.17,-0.4 -0.85,-0.01 -0.06,0.44 -0.61,-0.6 -0.36,0.48 -0.36,-0.23 -1.38,1.72 -0.29,-0.37 0,0 0.03,-0.7 -0.71,0.05 -0.58,-1.92 -0.73,-0.32 0,-0.88 -1.38,-0.59 -0.28,-0.6 1.42,-2.16 1.9,-0.74 1.65,-1.5 1.1,-1.29 -0.14,-0.7 0.64,-0.78 1.79,0.35 1.65,-2.59 -0.11,-0.91 1.94,-0.76 0.92,-1.11 -1.71,-1.54 -0.49,-1.04 1.69,-3.72 3.29,2.19 0.83,-1.08 0,0 1.74,-1.1 0.47,-0.98 1.03,-0.2 0.6,-1.77 1,-0.51 1.08,1.07 1.74,-1.42 1.29,-0.25 0,0 z"/>
    <path id="PT-13" title="Porto" d="m 713.33803,41.93988 -0.84,-1.46 -0.7,-5.37 -1.5,-3.47 0.37,-2.35 0,0 0.93,0.11 1.42,1.11 0.97,-0.13 0.63,1.08 1.42,0.29 0.46,0.53 -0.62,0.37 0,0 -0.41,0.36 0.4,1.75 0,0 2.91,-0.19 0.54,-0.95 1.45,-0.3 0.76,0.53 1.01,-0.89 0.48,0.14 -0.31,0.8 2.15,-0.63 0.3,1.07 0.92,0.43 0.3,-1.19 1,-1.04 0.75,0.03 0.28,-0.77 1.5,0.48 0.22,0.8 0.61,0.15 -0.22,0.73 0.85,0.72 1.05,0.58 0.67,-0.58 1.09,1.02 1.34,-1.19 0.46,-1.17 0,0 0.05,0.62 0.8,0.32 -0.52,0.97 1.78,1.13 -0.43,0.5 0.16,0.75 1.28,1.28 -1.15,5.11 0,0 -1.26,-0.12 -3.19,1.38 -1.36,-0.46 -1.25,0.71 -2.18,-0.43 -1.88,1.18 0,0 -0.95,-0.59 -1.68,1.65 -1.62,-0.49 -0.06,0.84 0.55,0.39 -0.19,0.9 -1.29,-0.88 -0.59,-1.29 -0.25,0.46 -0.93,-0.43 -0.2,0.55 0.82,0.39 -0.79,0.33 -0.09,0.5 -0.65,-0.22 -0.41,-1.03 -0.91,1.04 -1.4,0.29 -0.14,-0.72 -1.23,0.41 0,0 -0.73,-5.16 -0.75,-1.28 z"/>
    <path id="PT-14" title="Santarém" d="m 703.73803,119.09988 0.11,-3.25 0.7,-0.72 0.72,0.13 1.34,-3.05 3.19,-0.69 2.31,0.12 -0.54,-2 0.4,-0.29 0.61,0.63 1.36,-1.71 -0.97,-3.08 1.67,-0.92 0.49,-1.37 -1.43,-0.6 0.47,-0.66 -0.52,-0.89 0.13,-1.11 1.31,-0.65 1.34,0.53 1.62,-1.02 0.69,-1.08 0.43,0.53 0.91,-0.94 0.77,4.39 1.54,-1.2 0.76,0.34 1.1,-0.92 0.5,0.51 -0.1,-1.67 1.5,0.28 0,0 0.01,0.04 0,0 0.61,1.07 0.72,-0.42 0.44,1.06 -0.23,4.42 3.21,1.38 2.51,-0.24 -0.69,-1.7 0.6,-0.53 0.1,-2.61 0.55,-0.49 0.98,0.17 0.5,0.62 0.64,-0.69 0.53,1.17 -0.13,2.27 1.36,-0.29 0.71,1.02 0.87,0.21 1.33,2.01 0,0 0.38,0.75 0,0 -0.46,1.35 0,0 -0.83,1.08 -3.29,-2.19 -1.69,3.72 0.49,1.04 1.71,1.53 -0.92,1.11 -1.94,0.76 0.11,0.92 -1.65,2.58 -1.79,-0.34 -0.63,0.78 0.14,0.7 -1.1,1.28 -1.65,1.51 -1.89,0.73 -1.43,2.16 0.29,0.61 1.37,0.59 0.01,0.88 0.73,0.32 0.58,1.92 0.71,-0.05 -0.03,0.7 0,0 -0.46,0.56 -0.01,1.42 -0.93,1.25 1.96,0.92 0.08,0.42 0.83,-0.2 0.73,0.53 -0.91,1.17 0.67,0.37 0.2,0.88 0.3,-0.54 0.79,0.66 -0.51,1.23 -1.15,-0.62 0.14,-0.51 -0.99,0.07 0.24,-0.35 -0.8,-0.87 -0.9,0.45 -0.51,-0.67 0.21,-0.33 -1.28,-0.99 -0.29,0.93 -0.35,-0.58 -0.64,0.82 -1.14,-0.71 -1,1.35 -0.32,-0.59 -0.35,0.14 -1.27,1.59 -0.95,-0.5 -1.47,1.78 0,0 -2.09,-0.79 0.53,-2.33 -1.04,0.41 -0.31,0.86 -2.17,-1.45 -1.44,4.14 -1.2,0.35 -1.5,-1.11 -1.69,0.83 -0.37,-0.22 -0.11,0.43 -0.58,-0.95 0,0 -0.6,-0.74 0.45,-0.27 -0.14,-0.77 -1.06,-0.91 0,0 1.82,-2.5 0.63,-2.27 1.28,-0.73 -0.84,-0.29 1.14,-1.9 -0.6,-0.48 1.16,0.03 1.32,-1.23 -0.51,-1.54 -2.19,-1.3 -1.44,-1.77 1.03,-0.59 1.71,0.02 -0.2,-1.51 -0.93,-0.29 -0.42,-0.83 -1.15,0.64 -1.6,-0.83 -0.59,0.23 0.2,-1.52 -0.67,-0.45 z"/>
    <path id="PT-15" title="Setúbal" d="m 710.51803,154.44988 3.4,0.11 -0.89,-0.95 -0.67,0.05 0,-2.97 -0.57,-0.31 -0.09,-1.48 -0.66,1.32 -0.81,-0.64 0.22,1.13 -0.92,0.22 1.7,0.16 0.06,0.75 -0.77,0.58 -0.59,0.14 0.12,-0.69 -3.29,-1.38 -0.96,0.47 -0.16,0.81 -1.48,0.37 -1.51,1.33 -1.12,0.45 -1.39,-0.33 -0.82,0.55 -1.1,-0.02 -0.86,0.81 -0.85,-0.18 1.3,-3.69 1.19,-0.74 -1.2,0.31 -0.93,-3.58 -1.62,-2.32 3.69,-1.03 -0.01,0.91 1.46,0.68 -0.85,-0.13 0.67,1.27 -0.04,-0.88 0.77,-0.08 1.02,1.63 -0.47,-1.8 -0.82,-0.44 1.57,-0.78 0.11,0.71 0.55,-0.36 0.82,0.77 -0.46,-1.27 1.28,-0.69 -1.98,-0.02 -0.54,0.44 0.14,-1.04 2.6,-1.67 1.16,-0.11 0,0 0.58,0.95 0.11,-0.43 0.37,0.23 1.69,-0.82 1.5,1.11 1.2,-0.35 1.44,-4.14 2.17,1.46 0.31,-0.86 1.04,-0.41 -0.53,2.33 2.09,0.79 0,0 1.76,0.09 -0.63,1.03 0.31,0.82 -4.81,4.16 0.45,2.53 2.02,0.06 0.08,0.66 1.27,0.14 0.12,0.68 0.71,-0.32 -0.44,-0.95 0.49,-0.18 0.9,1.24 0.96,-0.43 0.71,0.26 1.71,-1 1.86,3.51 -0.4,0.87 1,-0.09 0.24,0.53 -0.57,0.06 0.57,0.49 -1.23,1.6 1.43,0.03 0.26,0.72 2.26,0.44 1.05,0.91 0,0 1.1,2.15 0,1.7 -2.86,0.86 -0.61,0.92 -1.4,-0.29 -0.22,1.9 -0.65,0.01 -0.72,-0.68 -0.14,0.56 -0.55,0.11 -0.25,1.38 -0.8,-0.45 -0.66,1.69 1.45,2.03 1.42,-0.17 0.8,1.31 -0.49,3.26 0.31,0.5 -1.13,1.3 0.14,0.78 -3.28,-0.95 -0.19,0.43 -3.06,0.26 -0.44,0.24 0.07,1.25 -0.54,-0.11 -0.56,0.77 -0.1,1.69 -0.62,-0.13 -0.33,0.43 -1.38,-0.75 -0.71,0.6 -1.64,-2.45 -1.29,0.39 -0.53,-0.58 0,0 -0.48,-4.31 -1.41,-0.32 -0.45,-0.73 -0.66,0.08 1.58,-2.76 1.56,-4.99 0.44,-3.72 -0.32,-3.94 -1.31,-3.37 -2.55,-2.86 2.59,1.92 0.82,2.23 -0.26,-2.13 0.86,0.83 z"/>
    <path id="PT-16" title="Viana do Castelo" d="m 729.09803,0.94988 0.29,3.29 2.01,-0.73 0.69,0.42 0.44,1.87 -0.33,0.7 -1.09,0.26 -1.11,0.97 -1.7,2.93 0.53,1.67 0.97,-0.11 0.13,2.46 0,0 -0.07,0.45 -0.91,-0.21 -2.39,1.74 -0.71,-0.41 -0.39,0.83 -1.39,0.06 -0.77,-0.44 -1.56,0.55 -1.17,1.05 -0.77,0.22 -0.04,-0.53 -0.46,0.05 -0.53,0.53 -0.1,1.96 -0.81,0.68 0.21,1.35 -0.7,0.32 -0.46,-0.81 -0.85,0.36 -1.23,-0.85 -0.25,0.98 -0.41,-0.47 -1.03,0.07 -1.9,1.11 -1.67,0.09 0,0 -0.51,-2.47 -0.44,-0.54 -0.15,0.43 -1.13,-3.22 0.18,-2.01 0.46,-0.54 -0.45,-0.45 0.04,-2.08 1.73,-1.73 1.96,-0.93 0.38,-1.38 2.59,-1.55 0.15,-1.17 0.68,-0.75 2.84,-0.27 0.83,-1.08 2.42,-0.12 0.45,0.43 1.49,-0.17 0.59,-0.6 0.98,0.28 0.47,-0.87 1.85,-0.73 0.15,-0.64 0.94,0.14 0.8,-0.89 z"/>
    <path id="PT-17" title="Vila Real" d="m 738.11803,10.07988 0.67,0.12 -0.24,2.74 0.61,0.61 0.99,-0.91 -0.12,-0.62 1.68,-0.08 0.9,-0.67 0.95,0.28 1.03,-0.65 1.48,1.12 2.15,-0.03 -0.81,2.23 2.85,-0.54 0.6,-1.16 1.57,0.18 0.28,1.09 0.57,0.38 -0.08,0.97 1.97,-1.92 0.3,0.52 1.3,-0.09 3.62,-1.56 0,0 -0.31,2.77 0,0 0.52,1.34 0,0 0.72,0.52 -0.03,1.06 -1.16,1.37 -1.58,5.09 0.01,1.18 0.93,1.7 -1.73,0.3 -0.56,1.18 0.1,0.97 -2.11,1.01 0,0 -0.05,1.06 0,0 0.45,1.62 -0.28,0.49 1.48,1.11 -1.31,0.3 -0.61,0.7 0.42,0.44 -0.93,0.76 0.13,1.73 -0.85,-0.16 -0.56,1.57 0,0 -2.24,0.48 -0.65,0.82 -0.77,-0.36 -1.33,1.34 -2.36,-0.27 -1.05,0.89 -3.13,-0.85 -0.53,0.67 -1.9,-0.47 -1.19,1.55 0,0 1.14,-5.11 -1.28,-1.28 -0.16,-0.75 0.43,-0.5 -1.78,-1.13 0.53,-0.97 -0.8,-0.32 -0.05,-0.62 0,0 0.21,-0.71 -0.43,-0.12 1.26,-1.5 0.1,-1.98 1.12,-0.48 0.29,-1.02 1.01,0.07 -0.08,-0.53 0.85,-0.5 -0.07,-0.71 0.59,-0.12 0.31,-0.72 -1.27,-1.76 -0.96,1.14 -3.66,-0.65 0.26,-3.43 -1.52,-0.67 -2.6,0.49 0.99,-0.99 0.83,-2.02 0.34,-2.48 0,0 1.2,-0.43 1.22,-1.93 1.68,-0.11 z"/>
    <path id="PT-18" title="Viseu" d="m 753.07803,40.19988 1.31,0.65 1.04,1.98 1.67,0.35 0,0 -1.3,3.89 0.26,1.34 -1.31,0.04 0.01,0.92 1.69,0.8 -0.34,1.58 0,0 -1.2,0.9 0,0 -0.18,1.82 -0.73,-0.41 -1.59,2.75 -1.91,-2.37 -1.49,-0.12 -0.79,0.82 -1.33,2.96 1.81,1.34 -0.82,0.85 0.18,0.62 1.77,0.98 -0.51,0.55 0.29,0.73 -0.75,0.58 -0.73,2.48 0.26,0.5 -2.67,0.57 -5.14,2.53 0,0 -1.77,1.05 -2.83,2.81 -2.17,0.81 -2.89,2.16 -1.16,-0.49 -0.45,0.47 -0.25,-0.4 -1.83,0.83 -1.54,-1.44 -0.93,0.14 -0.44,-0.62 -0.42,0.11 0,0 0.04,-1.72 1.18,-1.34 -0.57,-1.85 2.7,-1.04 -1.1,-1.16 -0.74,-2.37 1.99,-0.83 -1.55,-0.78 -0.08,-2.41 -0.92,-0.75 -0.19,-1.19 1.88,-0.71 1.13,-2.85 -0.57,-1.27 0.76,-0.37 1.28,0.77 0.73,-0.83 1.19,0.72 0.84,-0.75 -0.79,-1.3 -0.15,-2.07 1.37,-1.65 -0.06,-0.89 -0.25,-0.19 -1.08,1.45 -1.92,-0.82 -0.59,0.17 0.28,-0.67 -0.96,-0.07 -0.2,-0.56 0.32,-0.09 -0.2,-1.26 -0.85,-0.34 0,0 1.88,-1.18 2.18,0.43 1.25,-0.71 1.36,0.47 3.19,-1.38 1.26,0.12 0,0 1.2,-1.55 1.9,0.47 0.53,-0.67 3.13,0.85 1.05,-0.89 2.35,0.27 1.33,-1.34 0.77,0.36 0.65,-0.83 2.23,-0.46 z m 0.05,13.2 1.01,0.59 0.62,-0.88 -1.23,-0.85 -0.4,1.14 z"/>
  </svg>
</div>
<div class="pop">
  <p>This is the pop-up content.</p>
</div>

Thank you very much for answering

Answers

- HeikoThei223en
- April 6, 2024 at 4:46 pm
- 0 votes
0
The following solution draws the paths in a coordinate system whose origin lies in the center left of the path. For example, a 30 x 30 square starts 15 above this origin (M0 -15). Each path is then translated to its desired position with a suitable transform attribute.

When a path is clicked, its transform attribute is replaced with a different value (while the original value is kept in an xtransform attribute):
- It is translated to the center left of the whole screen (0, 50).
- Then it is scaled by the desired amount. This scaling happens relative to the center left to which the path was translated, so that it will not "fly off" the screen.
document.querySelector("svg").addEventListener("click", function(event) { var t = event.target.getAttribute("xtransform"); if (t) { event.target.setAttribute("transform", t) event.target.removeAttribute("xtransform"); } else { event.target.setAttribute("xtransform", event.target.getAttribute("transform")); event.target.setAttribute("transform", "translate(0, 50) scale(2)"); } });

path { transition: all 0.3s ease; }

<svg viewBox="0 0 200 200"> <path d="M0 -15 l30 0 l0 30 l-30 0 l0 -30z" transform="translate(60, 15)"/> <path d="M0 -15 l15 15 l15 -15 l0 30 l-30 0 l0 -30z" transform="translate(60, 65)"/> </svg>
Login or Signup to reply.

As commented by Robert Longson
transform-origin:center and transform-box:fill-box help to transform the elements according to their centers.

You can define a point to which the zoomed in paths should be aligned.
Once specified you can add offsets for the correct translate values like so

// alignment point (just an example)
let cx = 578.768142689069
let cy = 106.44989952392062

// get boundaries of each path
let { x, y, width, height } = path.getBBox();
    
// get translate values
let xAxisMove = cx - x - width/2 ;
let yAxisMove = cy - y - height/2;

const wrap = document.querySelector(".div-svg");
const svg = document.querySelector("svg");
const paths = document.querySelectorAll("path");
const popUp = document.querySelector(".pop");
let selectedPath = null;

// define point to align zoomed paths
let xOffset = -300
let yOffset = -0
let {x,y,width,height} = svg.getBoundingClientRect()
let ptCenter = screenToSVG(svg, x+width/2+xOffset, y+height/2+yOffset);
let [cx, cy] = [ptCenter.x, ptCenter.y];

// just for illustration
center.setAttribute('cx', `${cx}`)
center.setAttribute('cy', `${cy}`)
    
function screenToSVG(svg, screenX, screenY) {
   var p = new DOMPoint(screenX, screenY)
    return p.matrixTransform(svg.getScreenCTM().inverse());
}


for (const path of paths) {
  path.addEventListener("click", (event) => {
    if (selectedPath === path) return; // Don't change if clicking the same path again
    selectedPath = path;

    paths.forEach((otherPath) => {
      if (otherPath !== selectedPath) {
        otherPath.style.opacity = "0.4";
        otherPath.style.fill = "lightgray"; // Reduce opacity for unselected paths
        otherPath.style.pointerEvents = "none";
      }
    });

    // get bbox of path
    let { x, y, width, height } = path.getBBox();
    
    // get translate
     let xAxisMove = cx - x - width/2 ;
     let yAxisMove = cy - y - height/2;
    
    
    path.style = `transform: translate(${xAxisMove}px, ${yAxisMove}px) scale(2) `;
    path.classList.add("selected");
    path.style.pointerEvents = "auto";

    if (selectedPath != null) {
      document.documentElement.addEventListener("click", captureClick, true);
    }
  });

  function captureClick(event) {
    if (!event.target.classList.contains("selected")) {
      for (const path of paths) {
        path.classList.remove("selected");
        path.style.opacity = 1;
        path.style.pointerEvents = "auto";
        path.style.fill = "gray";
      }
      selectedPath.style = "transform: translate(0 px,0 px);";
      //selectedPath.removeAttribute('transform')
      selectedPath = null;
      document.documentElement.removeEventListener("click", captureClick, true);
    }
  }

  path.addEventListener("mouseenter", (event) => {
    const pathId = event.target.getAttribute("title");
    popUp.querySelector("p").textContent = `Content for path: ${pathId}`;
    const pathRect = event.target.getBoundingClientRect();
    popUp.style.top = `${pathRect.top + pathRect.height / 2}px`;
    popUp.style.left = `${pathRect.left + pathRect.width / 2}px`;
    popUp.style.opacity = 0.8;
  });

  path.addEventListener("mouseenter", (event) => {
    const districtName = event.target.id;
    event.target.style.fill = "red";
  });

  path.addEventListener("mouseleave", () => {
    event.target.style.fill = "";
    popUp.style.opacity = 0;
  });
}

function removeSvg() {
  const e = document.getElementById("teste_svg");
  e.remove();
}

.hoverme {
  display: none;
}

body {
  background: white;
  font-family: 'Open Sans Hebrew', Arial, sans-serif;
  text-align: center;
}

.div-svg {
  float: right;
}

svg {
  position: relative;
  height: auto;
  transform: translate(400px, 35px);
}

svg path {
  fill: gray;
  cursor: pointer;
  transition: all 0.3s ease;
}

svg path.selected {
  fill: #007bff;
  transition: all 0.3s ease;
}

svg path:hover {
  fill: rgba(black, 0.3);
  .pop {
    opacity: 1;
    width: 200px;
    height: 200px;
  }
}

.pop {
  pointer-events: none;
  position: absolute;
  transition: all 0.3s ease;
  background-color: lightblue;
}

path{
  stroke: red;
  transform-box:fill-box;
  transform-origin: center;
}

svg{
  border: 1px solid #ccc
}

<div class="div-svg">
  <svg viewBox="687.7681 0.4499 100 212" xmlns="http://www.w3.org/2000/svg" width="1080px" height="400">
    
    <path id="PT-01" title="Aveiro" d="m 714.77803,48.33988 1.23,-0.41 0.14,0.72 1.4,-0.29 0.91,-1.04 0.42,1.03 0.65,0.22 0.09,-0.5 0.79,-0.33 -0.82,-0.39 0.2,-0.55 0.93,0.43 0.25,-0.46 0.59,1.29 1.29,0.88 0.19,-0.9 -0.55,-0.38 0.06,-0.84 1.62,0.49 1.68,-1.65 0.95,0.6 0,0 0.85,0.34 0.2,1.26 -0.32,0.09 0.2,0.56 0.96,0.07 -0.28,0.67 0.59,-0.17 1.92,0.82 1.09,-1.45 0.25,0.19 0.06,0.89 -1.37,1.65 0.15,2.07 0.79,1.3 -0.84,0.75 -1.19,-0.72 -0.73,0.83 -1.28,-0.77 -0.76,0.37 0.57,1.27 -1.13,2.85 -1.88,0.71 0.19,1.19 0.92,0.75 0.08,2.41 1.55,0.78 -1.99,0.83 0.74,2.38 1.1,1.16 -2.7,1.04 0.57,1.85 -1.18,1.34 -0.04,1.72 0,0 -0.05,0.82 -0.55,0.25 -0.94,-0.44 -0.14,1.16 -1.24,0.26 -0.18,1.58 -1.07,-0.54 -1.12,0.07 -0.2,-1.04 1.42,0.01 0.12,-2.9 -0.74,-0.59 0,-0.92 -2.14,0.91 -0.07,-2.67 -0.29,-0.59 -0.98,-0.27 -0.53,0.82 -0.11,1.63 -0.88,-0.09 0,0 -1.23,-1.27 0,0 -2.6,-2.53 0,0 1.01,-4.22 0.07,-0.74 -0.44,-0.14 2.58,-8.59 1.19,-6.92 z"/>
    <path id="PT-02" title="Beja" d="m 729.94803,158.52988 0.39,-0.38 0.66,0.66 2.4,-0.62 1.44,1.16 0.89,-0.75 4.5,2.66 2.52,0.21 2.83,1.85 1.09,-0.37 1.44,0.23 0.7,0.6 2.19,0.01 0.06,-0.73 1.01,-0.41 0,0 0.82,-1.04 0,0 0.18,-0.7 0.73,-0.27 0.39,-0.92 -0.31,-0.33 1.61,-0.04 0.59,-0.86 1.57,-0.41 1.36,2.72 1.71,0.67 -0.28,0.9 1.24,2.57 0.3,0.12 -0.06,-0.67 0.69,0.08 0,0 0.71,-0.66 0,0 0,0 0,0 0.74,0.75 0.57,-0.69 0.22,0.35 0.97,-0.19 0.55,-0.88 0.97,-0.27 0.27,0.37 1.14,-0.72 0.06,0.73 -1.11,1.42 0.53,0.55 -0.58,1.68 -0.54,0.34 -0.45,3.18 -1.41,0.33 -1.64,-1.18 -0.94,0.57 0.24,0.99 -1.66,0.47 -0.91,-0.42 -1.91,0.94 0.45,1 -0.21,1.28 -0.86,1 -0.04,1.14 -1.29,2.12 -2.28,2.06 -0.78,0.2 -0.84,2.45 0.14,1.3 -0.39,0.1 0.04,0.62 -0.4,-0.12 -0.68,1.81 -0.48,-0.04 -0.09,1.91 -0.5,0.04 0.32,1.17 0,0 -1.95,-0.11 -1.39,1.47 -1.81,-0.55 -2.47,1.03 -0.36,-0.31 0.06,0.34 -1.55,0.92 -0.33,-0.25 -0.32,0.55 -0.63,-0.03 -0.1,0.46 -1.12,0.11 0.02,0.77 -0.36,-0.09 -0.17,0.52 -0.53,-0.37 -0.48,0.4 -1.34,-0.13 -0.78,1.17 0.51,0.57 -1.16,0.32 -1.21,1.42 -3.88,-0.9 -1.9,-1.71 -0.83,-0.08 0.32,-0.82 -0.4,-0.69 -1.34,-0.54 -0.29,0.61 -0.24,-0.38 -2.57,0.54 -0.12,1 -0.92,0.69 -2.02,-0.08 -1.74,-1.29 -1.45,0.37 -0.74,1.04 -0.78,-1 -2.19,0.22 -0.51,-1.45 -1.47,-0.44 0,0 0.33,-3.56 -1.07,-2.64 1.06,-4.55 -0.84,-1.39 0.62,-2.81 0,0 0.53,0.58 1.29,-0.39 1.64,2.44 0.71,-0.6 1.38,0.76 0.33,-0.43 0.62,0.13 0.11,-1.69 0.55,-0.77 0.54,0.11 -0.07,-1.25 0.44,-0.24 3.06,-0.27 0.19,-0.43 3.28,0.95 -0.14,-0.77 1.13,-1.3 -0.31,-0.5 0.49,-3.26 -0.8,-1.31 -1.42,0.17 -1.44,-2.03 0.66,-1.69 0.8,0.45 0.24,-1.39 0.55,-0.1 0.15,-0.57 0.72,0.69 0.62,-0.04 0.21,-1.9 1.41,0.29 0.61,-0.93 2.86,-0.86 0.01,-1.69 z"/>
    <path id="PT-03" title="Braga" d="m 733.52803,14.62988 -0.34,2.48 -0.83,2.02 -0.99,0.99 2.6,-0.49 1.52,0.67 -0.26,3.43 3.66,0.65 0.96,-1.14 1.27,1.76 -0.31,0.72 -0.59,0.12 0.07,0.71 -0.85,0.5 0.08,0.53 -1.01,-0.07 -0.29,1.02 -1.12,0.48 -0.1,1.98 -1.26,1.5 0.43,0.12 -0.21,0.71 0,0 -0.46,1.17 -1.33,1.19 -1.09,-1.02 -0.67,0.58 -1.05,-0.58 -0.84,-0.72 0.21,-0.73 -0.6,-0.14 -0.22,-0.81 -1.51,-0.48 -0.28,0.77 -0.75,-0.03 -1,1.04 -0.3,1.19 -0.92,-0.43 -0.3,-1.07 -2.15,0.63 0.31,-0.8 -0.48,-0.14 -1.01,0.89 -0.77,-0.53 -1.44,0.3 -0.54,0.95 -2.91,0.2 0,0 -0.4,-1.75 0.41,-0.36 0,0 0.62,-0.37 -0.46,-0.52 -1.42,-0.3 -0.62,-1.07 -0.98,0.13 -1.42,-1.11 -0.93,-0.11 0,0 -1.09,-5.93 0,0 1.67,-0.09 1.9,-1.11 1.03,-0.07 0.41,0.47 0.25,-0.98 1.23,0.85 0.85,-0.36 0.46,0.81 0.7,-0.32 -0.21,-1.35 0.81,-0.68 0.1,-1.96 0.53,-0.53 0.46,-0.05 0.04,0.53 0.77,-0.22 1.17,-1.05 1.56,-0.55 0.77,0.44 1.39,-0.06 0.39,-0.83 0.71,0.41 2.39,-1.74 0.91,0.21 0.07,-0.45 0,0 2.25,0.43 z"/>
    <path id="PT-04" title="Bragança" d="m 773.03803,7.44988 0.99,0.22 0.57,1.71 0.76,0.28 3.32,-0.12 1.05,-1.17 1.22,0.97 -0.68,2.58 1.75,0.5 -0.88,3.94 -0.8,1.47 0.41,0.26 0.45,2.4 1.33,0.98 1.33,-0.4 0.41,-0.77 4.49,0.97 1.51,1.22 0.59,1.09 1.08,0.52 0.39,0.84 -1.51,2.24 -0.66,0.31 0.22,0.58 -0.47,0.08 0.13,0.49 -0.71,0.32 -0.67,1.23 0.17,0.88 -1.05,0.77 0.49,1.04 -1.1,0.31 -0.44,-0.64 -0.73,0.37 -0.12,0.62 0.52,0.44 -1.21,0.48 -0.71,1.79 -1.55,0.58 0.27,0.65 -0.57,0.41 -0.83,-0.4 -1.54,1.53 -0.64,-0.68 -0.26,0.49 -1.53,-0.17 -1.36,1.59 -0.56,1.55 -1.86,1.58 0.44,1.28 -1.73,2.82 -1.88,0.4 -1.51,-0.48 -0.48,0.38 0,0 -1.19,-0.29 -0.72,0.47 -0.19,-0.49 -1.44,-0.31 -0.47,-0.78 -1.37,-0.73 -0.02,-1.01 0.59,-0.89 -1.47,-0.49 0.49,-0.55 -0.08,-1.19 -1.47,2.22 -2.71,-0.79 -1.73,0.23 0,0 -1.68,-0.35 -1.04,-1.98 -1.31,-0.65 0,0 0.56,-1.57 0.85,0.16 -0.13,-1.73 0.93,-0.76 -0.42,-0.44 0.61,-0.7 1.31,-0.3 -1.48,-1.11 0.28,-0.49 -0.45,-1.62 0,0 0.05,-1.06 0,0 2.11,-1.01 -0.1,-0.97 0.56,-1.18 1.73,-0.3 -0.93,-1.7 -0.01,-1.18 1.58,-5.09 1.16,-1.37 0.03,-1.06 -0.72,-0.52 0,0 -0.52,-1.34 0,0 0.31,-2.77 0,0 0.86,-1.67 -0.51,-0.95 0.13,-1.3 1.39,-0.78 1.7,0.73 0.49,1 2.08,-0.03 0.85,-0.99 0.68,0.21 0.42,1.03 1.65,0.2 2.23,-0.26 0.32,-1.97 z"/>
    <path id="PT-05" title="Castelo Branco" d="m 742.01803,80.91988 1.53,-0.29 0.76,-0.99 1.7,-0.53 1.17,-1.07 0.32,-0.99 0.87,0.51 1.39,-0.27 0.7,-2.1 0.88,-1.08 0.8,-0.29 0.46,0.62 0.68,-0.21 0.99,0.46 1.1,-0.48 0.46,0.44 0.55,-1.2 0.66,0.31 0.43,-0.53 0.71,0.34 -0.1,2.5 -1.04,1.79 -0.82,0.42 0.43,0.54 2.49,0.92 0.87,-1.14 1.62,0.72 0.8,-0.59 0.17,-1.21 0.59,-0.51 0.89,1.9 1.67,0.01 0.53,-0.49 1.98,1.35 0,0 -0.38,0.79 -1.56,0.53 -0.54,1.61 0.42,0.41 -0.15,1.34 0.89,1.29 1.65,0 0.75,1.91 0.78,0.24 0.9,1.98 -0.72,1.34 0.06,1.59 -0.69,0.69 0.1,2.18 -1.42,1.77 -1.22,0.71 0.33,1.54 -1.23,4.17 -4.29,0.71 -3.16,-0.56 -2.59,1.06 -3.85,-0.88 -2.72,-0.05 0,0 -1.29,0.25 -1.74,1.42 -1.08,-1.07 -1,0.51 -0.6,1.77 -1.03,0.2 -0.47,0.98 -1.74,1.1 0,0 0.46,-1.35 0,0 -0.38,-0.76 0,0 -1.33,-2.01 -0.87,-0.21 -0.71,-1.03 -1.36,0.29 0.13,-2.26 -0.52,-1.17 -0.64,0.69 -0.51,-0.62 -0.97,-0.17 -0.55,0.49 -0.11,2.61 -0.6,0.54 0.69,1.69 -2.51,0.25 -3.21,-1.38 0.23,-4.42 -0.44,-1.05 -0.71,0.41 -0.62,-1.07 0,0 0,-0.03 0,0 -0.25,-0.53 0.66,-0.44 -0.1,-0.94 1.51,-0.56 0.55,0.21 0.75,-1.25 0.56,0.25 0.61,-0.41 0.96,-2 0,0 0.12,-0.6 1.02,0.07 -0.11,-0.75 0.64,0.44 0.3,-0.62 0.74,0.37 0.05,-0.99 0.45,0.56 0.38,-0.06 -0.27,-0.69 0.51,0.46 0.64,-0.45 0.44,0.49 0.33,-1.04 1.61,-0.01 -0.44,-1.23 1.63,-1.04 1.24,0.3 0.53,0.62 0.06,-1.42 0,0 0.31,-0.29 -0.66,0.03 0,0 0.96,-0.38 0.43,0.89 0.96,-1.15 -0.27,-0.32 0.62,-0.25 -0.14,-0.76 -1.9,-1.52 -0.4,-0.84 z"/>
    <path id="PT-06" title="Coimbra" d="m 710.37803,68.91988 2.6,2.53 0,0 1.23,1.27 0,0 0.88,0.09 0.11,-1.63 0.53,-0.82 0.97,0.27 0.29,0.59 0.08,2.67 2.13,-0.91 0,0.92 0.74,0.59 -0.11,2.9 -1.42,-0.01 0.2,1.04 1.12,-0.07 1.06,0.54 0.18,-1.58 1.24,-0.27 0.14,-1.16 0.94,0.44 0.55,-0.25 0.05,-0.82 0,0 0.42,-0.11 0.44,0.63 0.93,-0.14 1.54,1.44 1.83,-0.83 0.25,0.4 0.45,-0.47 1.16,0.49 2.89,-2.16 2.17,-0.81 2.83,-2.81 1.76,-1.05 0,0 0.04,0.69 0.96,1.01 -0.44,0.74 -1.18,0.44 0.09,0.61 0.58,0.45 0.94,-0.08 -0.25,2.3 1.48,0.73 -0.23,0.63 -1.23,0.36 -0.68,1.73 1.38,1.48 0,0 -0.85,1.98 0.4,0.84 1.9,1.52 0.14,0.76 -0.62,0.25 0.27,0.32 -0.96,1.15 -0.43,-0.89 -0.96,0.38 0,0 0.66,-0.03 -0.31,0.29 0,0 -0.06,1.42 -0.53,-0.62 -1.24,-0.3 -1.63,1.04 0.44,1.23 -1.61,0.01 -0.33,1.04 -0.44,-0.49 -0.64,0.45 -0.51,-0.46 0.27,0.69 -0.38,0.06 -0.45,-0.56 -0.05,0.99 -0.74,-0.37 -0.3,0.62 -0.64,-0.44 0.11,0.75 -1.02,-0.07 -0.12,0.6 0,0 -0.43,-0.24 0.71,-1.3 -1.45,-2.07 0.38,-2.09 -1.11,-0.69 -0.97,1.54 -1.03,-0.62 -1.06,0.9 -0.7,1.48 0.87,0.83 -0.28,1.22 -1.09,-1.2 -1.89,2.66 -1.11,-0.33 0.92,-0.97 -1.46,-2.92 -0.34,0.44 0.31,0.75 -0.96,-0.83 -1.05,1.3 -1,0.07 -0.52,1.46 -0.73,-3.25 -0.94,0.02 -0.74,1.45 -0.88,0.08 0.06,-0.85 -1.09,-0.78 -2.87,-0.45 -1.08,1.17 -1.23,-0.66 -0.92,0.21 -0.8,-0.86 0,0 1.02,-3.83 -1.51,-2.06 2.05,-5.9 z"/>
    <path id="PT-07" title=" Évora" d="m 727.94803,131.64988 0.29,0.37 1.38,-1.72 0.36,0.23 0.36,-0.48 0.61,0.6 0.06,-0.44 0.85,0.01 0.17,0.4 -0.69,0.36 0.55,1.41 0.5,-0.29 0.03,-1.21 0.5,-0.39 1.79,1.39 -0.27,1.64 1.12,-0.14 1.96,-1.23 0.94,1.75 0.57,0.21 0.03,0.72 2.72,0.51 0.14,-0.46 1.05,-0.04 0.61,-1.25 1.1,1.08 0.46,-0.69 1.45,0.73 1.05,-1.71 1.25,0.05 0.71,-0.63 -0.34,-0.99 0.62,-0.64 0.65,0.91 0.87,-0.08 -0.09,0.5 1.11,0.45 -0.42,1.55 1.37,0.91 -0.15,1.07 0.73,1.14 -0.62,0.03 0.6,0.45 0.43,1.43 0.73,-0.4 0.42,0.55 0.85,-0.25 0.08,-0.86 0.6,-0.21 0,0 0.38,-0.41 0,0 0.47,0.52 1.1,-0.81 0.58,0.77 0.6,-0.1 -0.79,1.96 0.91,1.26 0,0 -1.77,1.12 -0.4,3.43 0.91,0.58 -2.24,4.43 -0.22,1.43 0.67,-0.18 0.05,0.53 -1.17,1.36 0.59,-0.18 1.18,0.83 0.26,1 3.21,4.63 0.61,0.14 1.35,3.51 0,0 0,0 0,0 -0.71,0.66 0,0 -0.69,-0.08 0.06,0.67 -0.3,-0.12 -1.24,-2.57 0.28,-0.9 -1.71,-0.67 -1.36,-2.72 -1.57,0.41 -0.59,0.86 -1.61,0.04 0.31,0.33 -0.39,0.92 -0.73,0.27 -0.18,0.7 0,0 -0.82,1.04 0,0 -1.01,0.41 -0.06,0.73 -2.19,-0.01 -0.7,-0.6 -1.44,-0.23 -1.09,0.37 -2.83,-1.85 -2.52,-0.21 -4.5,-2.66 -0.89,0.75 -1.44,-1.16 -2.4,0.62 -0.66,-0.66 -0.39,0.38 0,0 -1.05,-0.91 -2.26,-0.44 -0.25,-0.72 -1.43,-0.03 1.22,-1.6 -0.57,-0.49 0.57,-0.06 -0.24,-0.53 -1,0.09 0.4,-0.87 -1.85,-3.51 -1.71,1 -0.71,-0.26 -0.96,0.43 -0.9,-1.24 -0.49,0.19 0.44,0.95 -0.71,0.32 -0.12,-0.68 -1.27,-0.14 -0.08,-0.66 -2.02,-0.06 -0.45,-2.52 4.81,-4.16 -0.31,-0.82 0.63,-1.03 -1.76,-0.09 0,0 1.46,-1.77 0.95,0.5 1.27,-1.58 0.35,-0.14 0.32,0.59 0.99,-1.35 1.14,0.71 0.64,-0.82 0.35,0.58 0.29,-0.93 1.28,0.99 -0.21,0.33 0.51,0.67 0.9,-0.44 0.79,0.87 -0.24,0.35 0.99,-0.07 -0.13,0.51 1.14,0.62 0.51,-1.23 -0.79,-0.66 -0.3,0.53 -0.2,-0.87 -0.67,-0.37 0.91,-1.17 -0.73,-0.53 -0.82,0.2 -0.08,-0.41 -1.95,-0.92 0.93,-1.24 0,-1.43 z"/>
    <path id="PT-08" title="Faro" d="m 740.65803,210.78988 0.55,0.1 -1.95,1.54 0.45,-1.02 0.95,-0.62 z m -3.7,-0.07 2.27,1.68 -1.73,-0.23 -1.68,-1.24 1.14,-0.21 z m 3.92,-0.63 0.37,0.36 -1.61,0.47 1.24,-0.83 z m -13.05,-2.4 -2.1,0.43 -2.13,-1.16 -2.25,0.64 -3.12,-1.28 -2.55,-0.2 -1.53,0.64 -0.09,1.1 -1.87,-0.3 -1.93,0.93 -1.64,0.09 -0.75,0.73 -0.96,-0.02 -1.69,1.93 -0.5,-1.25 -1.05,0.11 2.95,-5.64 -0.47,-1.23 0.71,-0.4 1.12,-2.47 -0.56,-2.06 1.05,-1.23 1.53,-3.6 0,0 1.47,0.44 0.51,1.45 2.19,-0.22 0.78,1 0.74,-1.04 1.45,-0.37 1.73,1.29 2.02,0.09 0.92,-0.69 0.12,-1 2.57,-0.54 0.24,0.38 0.29,-0.61 1.33,0.54 0.41,0.69 -0.32,0.82 0.83,0.08 1.91,1.71 3.87,0.89 1.21,-1.41 1.16,-0.33 -0.51,-0.57 0.78,-1.17 1.35,0.13 0.47,-0.4 0.53,0.38 0.17,-0.52 0.37,0.09 -0.02,-0.77 1.13,-0.11 0.09,-0.46 0.64,0.03 0.32,-0.55 0.33,0.26 1.55,-0.92 -0.06,-0.34 0.36,0.31 2.48,-1.03 1.8,0.56 1.4,-1.48 1.95,0.11 0,0 0.64,0.16 0.25,0.95 0.64,0.44 -0.16,0.74 0.74,1.95 -0.54,0.41 0.7,0.71 -0.05,3.15 0.65,1.48 -0.38,0.94 0.64,0.98 0.19,2.12 -1.64,-0.22 -3.2,1.01 -7.37,5.39 -1.02,-0.48 -1.39,0.82 0.01,0.84 -0.46,0.15 -1.78,-1.13 -1.33,0.25 -4.04,-2.62 -2.27,-0.8 -1.56,0.28 z"/>
    <path id="PT-09" title="Guarda" d="m 753.52803,52.25988 1.23,0.85 -0.62,0.88 -1.01,-0.59 0.4,-1.14 z m 3.58,-9.08 1.74,-0.23 2.7,0.79 1.47,-2.22 0.09,1.19 -0.49,0.55 1.46,0.49 -0.59,0.89 0.02,1.02 1.37,0.72 0.47,0.78 1.44,0.32 0.19,0.49 0.73,-0.47 1.19,0.29 0,0 0.31,1.12 1.97,2.2 0.32,1.96 1.27,0.85 0.23,0.9 0,0.63 -0.79,0.22 0.32,1.8 -0.45,1.84 1.17,3.8 -1.62,3.95 1.41,0.65 0.18,1.61 -1.72,2.48 0.48,1.81 1.69,1.78 -0.41,1.49 -2.12,1.19 -0.3,1.53 -2.54,0.2 0,0 -1.98,-1.34 -0.52,0.49 -1.68,-0.01 -0.89,-1.9 -0.6,0.51 -0.17,1.21 -0.8,0.59 -1.61,-0.72 -0.87,1.14 -2.49,-0.92 -0.43,-0.55 0.82,-0.42 1.04,-1.79 0.1,-2.5 -0.71,-0.33 -0.44,0.52 -0.66,-0.3 -0.55,1.19 -0.46,-0.43 -1.1,0.48 -0.98,-0.47 -0.68,0.21 -0.45,-0.62 -0.8,0.29 -0.88,1.07 -0.7,2.1 -1.39,0.27 -0.87,-0.51 -0.31,0.98 -1.18,1.08 -1.7,0.53 -0.76,0.99 -1.54,0.29 0,0 -1.37,-1.48 0.68,-1.72 1.23,-0.36 0.23,-0.63 -1.48,-0.72 0.25,-2.3 -0.94,0.08 -0.58,-0.45 -0.1,-0.61 1.18,-0.43 0.44,-0.75 -0.96,-1.01 -0.03,-0.69 0,0 5.14,-2.53 2.67,-0.57 -0.26,-0.5 0.73,-2.48 0.75,-0.58 -0.29,-0.73 0.51,-0.55 -1.76,-0.98 -0.18,-0.62 0.82,-0.85 -1.81,-1.34 1.33,-2.96 0.79,-0.82 1.49,0.12 1.91,2.37 1.59,-2.75 0.74,0.41 0.18,-1.82 0,0 1.2,-0.9 0,0 0.35,-1.58 -1.69,-0.8 -0.01,-0.92 1.31,-0.04 -0.26,-1.34 1.25,-3.92 z"/>
    <path id="PT-10" title="Leiria" d="m 713.46803,107.60988 0,0 0,0 0.48,0.63 -0.77,1.27 -0.6,0.47 -0.61,-0.63 -0.4,0.3 0.55,1.99 -2.31,-0.12 -3.19,0.69 -1.33,3.05 -0.72,-0.13 -0.7,0.72 -0.11,3.25 0,0 -1.01,0.14 -0.41,-0.69 -0.85,0.02 -0.18,0.42 0,0 -1.15,0.95 0,0 -1.08,1.9 -1.11,0.72 -0.77,-1.47 0.49,-0.86 -0.42,-1.36 -1.42,-0.1 -0.32,-0.52 -1.3,1.39 -1.4,-0.34 0,0 -0.76,-2.32 -1.39,-0.44 0.39,-0.44 1.59,0.29 3.33,-2.53 0.93,0.76 -0.36,0.26 1.25,-0.04 -0.55,-0.07 -0.83,-1.33 1.77,-2.64 1.08,-0.15 -0.26,-0.7 2.19,-2.7 0.05,-0.59 -0.39,-0.08 1.14,-4.73 4.95,-13.29 0,0 0.8,0.86 0.92,-0.21 1.24,0.66 1.07,-1.16 2.87,0.44 1.09,0.78 -0.05,0.85 0.88,-0.08 0.74,-1.45 0.94,-0.01 0.72,3.25 0.52,-1.46 1,-0.06 1.05,-1.3 0.96,0.83 -0.31,-0.75 0.34,-0.44 1.46,2.92 -0.91,0.97 1.11,0.33 1.89,-2.66 1.09,1.2 0.28,-1.21 -0.86,-0.83 0.7,-1.48 1.06,-0.9 1.03,0.63 0.97,-1.55 1.12,0.7 -0.39,2.09 1.45,2.07 -0.71,1.3 0.44,0.24 0,0 -0.96,2 -0.61,0.42 -0.56,-0.25 -0.75,1.25 -0.55,-0.21 -1.51,0.56 0.1,0.94 -0.66,0.44 0.25,0.53 0,0 0,0 0,0 -1.49,-0.28 0.11,1.67 -0.5,-0.51 -1.1,0.92 -0.76,-0.34 -1.54,1.2 -0.77,-4.39 -0.91,0.94 -0.43,-0.53 -0.69,1.08 -1.62,1.02 -1.33,-0.53 -1.31,0.66 -0.13,1.11 0.52,0.89 -0.47,0.66 1.43,0.6 -0.49,1.37 -1.67,0.92 0.4,2.34 z"/>
    <path id="PT-11" title="Lisboa" d="m 698.98803,143.04988 -2.24,0.55 -2.05,-0.29 -1.35,1.03 -2.16,-1.16 -1.09,0.51 -1.88,-0.76 0.45,-1.68 -0.9,-1.24 2.6,-6.54 0.25,0.18 -0.55,-2.59 0.18,-2.93 2.41,-5.21 0.14,-3.6 0,0 1.4,0.34 1.31,-1.39 0.32,0.52 1.42,0.11 0.43,1.36 -0.48,0.86 0.77,1.47 1.11,-0.72 1.08,-1.9 0,0 1.15,-0.95 0,0 0.19,-0.42 0.85,-0.02 0.41,0.69 1.01,-0.14 0,0 0.61,0.39 -0.19,1.52 0.59,-0.23 1.61,0.83 1.15,-0.64 0.42,0.83 0.93,0.29 0.2,1.51 -1.7,-0.02 -1.03,0.59 1.44,1.77 2.19,1.3 0.51,1.54 -1.32,1.23 -1.16,-0.03 0.6,0.48 -1.13,1.9 0.84,0.29 -1.28,0.74 -0.63,2.27 -1.82,2.5 0,0 -0.66,-1.03 0.36,-0.62 -0.52,-0.66 -0.02,-2.33 -0.77,2.15 -2.05,2.76 -0.57,3.53 -1.38,1.06 z"/>
    <path id="PT-12" title="Portalegre" d="m 749.75803,104.23988 1.19,2.93 1.21,0.69 0.98,1.56 1.25,0.2 0.27,1.57 0.62,0.4 0.46,-0.27 1.69,1.27 -0.9,3.07 0.48,1.84 2.4,2.35 -0.52,1.01 0.21,1.84 1.06,0.85 2.31,0.65 -0.29,2.54 1.22,0.38 2.29,-0.73 1.64,1.19 0.67,1.35 -0.26,0.61 0.53,0.64 -3.19,4.72 0.6,1.14 -0.2,0.57 -0.92,0.42 -0.88,1.55 -1.39,0.4 -2,2.2 0,0 -0.91,-1.26 0.79,-1.96 -0.6,0.1 -0.58,-0.77 -1.1,0.81 -0.47,-0.52 0,0 -0.38,0.41 0,0 -0.6,0.21 -0.08,0.86 -0.85,0.25 -0.42,-0.55 -0.73,0.4 -0.43,-1.43 -0.6,-0.45 0.62,-0.03 -0.73,-1.14 0.15,-1.07 -1.37,-0.91 0.42,-1.55 -1.11,-0.45 0.09,-0.5 -0.87,0.08 -0.65,-0.91 -0.62,0.64 0.34,0.99 -0.71,0.63 -1.25,-0.05 -1.05,1.71 -1.45,-0.73 -0.46,0.69 -1.1,-1.08 -0.61,1.25 -1.05,0.04 -0.14,0.46 -2.72,-0.51 -0.03,-0.72 -0.57,-0.21 -0.94,-1.75 -1.96,1.23 -1.12,0.14 0.27,-1.64 -1.79,-1.39 -0.5,0.39 -0.03,1.21 -0.5,0.29 -0.55,-1.41 0.69,-0.36 -0.17,-0.4 -0.85,-0.01 -0.06,0.44 -0.61,-0.6 -0.36,0.48 -0.36,-0.23 -1.38,1.72 -0.29,-0.37 0,0 0.03,-0.7 -0.71,0.05 -0.58,-1.92 -0.73,-0.32 0,-0.88 -1.38,-0.59 -0.28,-0.6 1.42,-2.16 1.9,-0.74 1.65,-1.5 1.1,-1.29 -0.14,-0.7 0.64,-0.78 1.79,0.35 1.65,-2.59 -0.11,-0.91 1.94,-0.76 0.92,-1.11 -1.71,-1.54 -0.49,-1.04 1.69,-3.72 3.29,2.19 0.83,-1.08 0,0 1.74,-1.1 0.47,-0.98 1.03,-0.2 0.6,-1.77 1,-0.51 1.08,1.07 1.74,-1.42 1.29,-0.25 0,0 z"/>
    <path id="PT-13" title="Porto" d="m 713.33803,41.93988 -0.84,-1.46 -0.7,-5.37 -1.5,-3.47 0.37,-2.35 0,0 0.93,0.11 1.42,1.11 0.97,-0.13 0.63,1.08 1.42,0.29 0.46,0.53 -0.62,0.37 0,0 -0.41,0.36 0.4,1.75 0,0 2.91,-0.19 0.54,-0.95 1.45,-0.3 0.76,0.53 1.01,-0.89 0.48,0.14 -0.31,0.8 2.15,-0.63 0.3,1.07 0.92,0.43 0.3,-1.19 1,-1.04 0.75,0.03 0.28,-0.77 1.5,0.48 0.22,0.8 0.61,0.15 -0.22,0.73 0.85,0.72 1.05,0.58 0.67,-0.58 1.09,1.02 1.34,-1.19 0.46,-1.17 0,0 0.05,0.62 0.8,0.32 -0.52,0.97 1.78,1.13 -0.43,0.5 0.16,0.75 1.28,1.28 -1.15,5.11 0,0 -1.26,-0.12 -3.19,1.38 -1.36,-0.46 -1.25,0.71 -2.18,-0.43 -1.88,1.18 0,0 -0.95,-0.59 -1.68,1.65 -1.62,-0.49 -0.06,0.84 0.55,0.39 -0.19,0.9 -1.29,-0.88 -0.59,-1.29 -0.25,0.46 -0.93,-0.43 -0.2,0.55 0.82,0.39 -0.79,0.33 -0.09,0.5 -0.65,-0.22 -0.41,-1.03 -0.91,1.04 -1.4,0.29 -0.14,-0.72 -1.23,0.41 0,0 -0.73,-5.16 -0.75,-1.28 z"/>
    <path id="PT-14" title="Santarém" d="m 703.73803,119.09988 0.11,-3.25 0.7,-0.72 0.72,0.13 1.34,-3.05 3.19,-0.69 2.31,0.12 -0.54,-2 0.4,-0.29 0.61,0.63 1.36,-1.71 -0.97,-3.08 1.67,-0.92 0.49,-1.37 -1.43,-0.6 0.47,-0.66 -0.52,-0.89 0.13,-1.11 1.31,-0.65 1.34,0.53 1.62,-1.02 0.69,-1.08 0.43,0.53 0.91,-0.94 0.77,4.39 1.54,-1.2 0.76,0.34 1.1,-0.92 0.5,0.51 -0.1,-1.67 1.5,0.28 0,0 0.01,0.04 0,0 0.61,1.07 0.72,-0.42 0.44,1.06 -0.23,4.42 3.21,1.38 2.51,-0.24 -0.69,-1.7 0.6,-0.53 0.1,-2.61 0.55,-0.49 0.98,0.17 0.5,0.62 0.64,-0.69 0.53,1.17 -0.13,2.27 1.36,-0.29 0.71,1.02 0.87,0.21 1.33,2.01 0,0 0.38,0.75 0,0 -0.46,1.35 0,0 -0.83,1.08 -3.29,-2.19 -1.69,3.72 0.49,1.04 1.71,1.53 -0.92,1.11 -1.94,0.76 0.11,0.92 -1.65,2.58 -1.79,-0.34 -0.63,0.78 0.14,0.7 -1.1,1.28 -1.65,1.51 -1.89,0.73 -1.43,2.16 0.29,0.61 1.37,0.59 0.01,0.88 0.73,0.32 0.58,1.92 0.71,-0.05 -0.03,0.7 0,0 -0.46,0.56 -0.01,1.42 -0.93,1.25 1.96,0.92 0.08,0.42 0.83,-0.2 0.73,0.53 -0.91,1.17 0.67,0.37 0.2,0.88 0.3,-0.54 0.79,0.66 -0.51,1.23 -1.15,-0.62 0.14,-0.51 -0.99,0.07 0.24,-0.35 -0.8,-0.87 -0.9,0.45 -0.51,-0.67 0.21,-0.33 -1.28,-0.99 -0.29,0.93 -0.35,-0.58 -0.64,0.82 -1.14,-0.71 -1,1.35 -0.32,-0.59 -0.35,0.14 -1.27,1.59 -0.95,-0.5 -1.47,1.78 0,0 -2.09,-0.79 0.53,-2.33 -1.04,0.41 -0.31,0.86 -2.17,-1.45 -1.44,4.14 -1.2,0.35 -1.5,-1.11 -1.69,0.83 -0.37,-0.22 -0.11,0.43 -0.58,-0.95 0,0 -0.6,-0.74 0.45,-0.27 -0.14,-0.77 -1.06,-0.91 0,0 1.82,-2.5 0.63,-2.27 1.28,-0.73 -0.84,-0.29 1.14,-1.9 -0.6,-0.48 1.16,0.03 1.32,-1.23 -0.51,-1.54 -2.19,-1.3 -1.44,-1.77 1.03,-0.59 1.71,0.02 -0.2,-1.51 -0.93,-0.29 -0.42,-0.83 -1.15,0.64 -1.6,-0.83 -0.59,0.23 0.2,-1.52 -0.67,-0.45 z"/>
    <path id="PT-15" title="Setúbal" d="m 710.51803,154.44988 3.4,0.11 -0.89,-0.95 -0.67,0.05 0,-2.97 -0.57,-0.31 -0.09,-1.48 -0.66,1.32 -0.81,-0.64 0.22,1.13 -0.92,0.22 1.7,0.16 0.06,0.75 -0.77,0.58 -0.59,0.14 0.12,-0.69 -3.29,-1.38 -0.96,0.47 -0.16,0.81 -1.48,0.37 -1.51,1.33 -1.12,0.45 -1.39,-0.33 -0.82,0.55 -1.1,-0.02 -0.86,0.81 -0.85,-0.18 1.3,-3.69 1.19,-0.74 -1.2,0.31 -0.93,-3.58 -1.62,-2.32 3.69,-1.03 -0.01,0.91 1.46,0.68 -0.85,-0.13 0.67,1.27 -0.04,-0.88 0.77,-0.08 1.02,1.63 -0.47,-1.8 -0.82,-0.44 1.57,-0.78 0.11,0.71 0.55,-0.36 0.82,0.77 -0.46,-1.27 1.28,-0.69 -1.98,-0.02 -0.54,0.44 0.14,-1.04 2.6,-1.67 1.16,-0.11 0,0 0.58,0.95 0.11,-0.43 0.37,0.23 1.69,-0.82 1.5,1.11 1.2,-0.35 1.44,-4.14 2.17,1.46 0.31,-0.86 1.04,-0.41 -0.53,2.33 2.09,0.79 0,0 1.76,0.09 -0.63,1.03 0.31,0.82 -4.81,4.16 0.45,2.53 2.02,0.06 0.08,0.66 1.27,0.14 0.12,0.68 0.71,-0.32 -0.44,-0.95 0.49,-0.18 0.9,1.24 0.96,-0.43 0.71,0.26 1.71,-1 1.86,3.51 -0.4,0.87 1,-0.09 0.24,0.53 -0.57,0.06 0.57,0.49 -1.23,1.6 1.43,0.03 0.26,0.72 2.26,0.44 1.05,0.91 0,0 1.1,2.15 0,1.7 -2.86,0.86 -0.61,0.92 -1.4,-0.29 -0.22,1.9 -0.65,0.01 -0.72,-0.68 -0.14,0.56 -0.55,0.11 -0.25,1.38 -0.8,-0.45 -0.66,1.69 1.45,2.03 1.42,-0.17 0.8,1.31 -0.49,3.26 0.31,0.5 -1.13,1.3 0.14,0.78 -3.28,-0.95 -0.19,0.43 -3.06,0.26 -0.44,0.24 0.07,1.25 -0.54,-0.11 -0.56,0.77 -0.1,1.69 -0.62,-0.13 -0.33,0.43 -1.38,-0.75 -0.71,0.6 -1.64,-2.45 -1.29,0.39 -0.53,-0.58 0,0 -0.48,-4.31 -1.41,-0.32 -0.45,-0.73 -0.66,0.08 1.58,-2.76 1.56,-4.99 0.44,-3.72 -0.32,-3.94 -1.31,-3.37 -2.55,-2.86 2.59,1.92 0.82,2.23 -0.26,-2.13 0.86,0.83 z"/>
    <path id="PT-16" title="Viana do Castelo" d="m 729.09803,0.94988 0.29,3.29 2.01,-0.73 0.69,0.42 0.44,1.87 -0.33,0.7 -1.09,0.26 -1.11,0.97 -1.7,2.93 0.53,1.67 0.97,-0.11 0.13,2.46 0,0 -0.07,0.45 -0.91,-0.21 -2.39,1.74 -0.71,-0.41 -0.39,0.83 -1.39,0.06 -0.77,-0.44 -1.56,0.55 -1.17,1.05 -0.77,0.22 -0.04,-0.53 -0.46,0.05 -0.53,0.53 -0.1,1.96 -0.81,0.68 0.21,1.35 -0.7,0.32 -0.46,-0.81 -0.85,0.36 -1.23,-0.85 -0.25,0.98 -0.41,-0.47 -1.03,0.07 -1.9,1.11 -1.67,0.09 0,0 -0.51,-2.47 -0.44,-0.54 -0.15,0.43 -1.13,-3.22 0.18,-2.01 0.46,-0.54 -0.45,-0.45 0.04,-2.08 1.73,-1.73 1.96,-0.93 0.38,-1.38 2.59,-1.55 0.15,-1.17 0.68,-0.75 2.84,-0.27 0.83,-1.08 2.42,-0.12 0.45,0.43 1.49,-0.17 0.59,-0.6 0.98,0.28 0.47,-0.87 1.85,-0.73 0.15,-0.64 0.94,0.14 0.8,-0.89 z"/>
    <path id="PT-17" title="Vila Real" d="m 738.11803,10.07988 0.67,0.12 -0.24,2.74 0.61,0.61 0.99,-0.91 -0.12,-0.62 1.68,-0.08 0.9,-0.67 0.95,0.28 1.03,-0.65 1.48,1.12 2.15,-0.03 -0.81,2.23 2.85,-0.54 0.6,-1.16 1.57,0.18 0.28,1.09 0.57,0.38 -0.08,0.97 1.97,-1.92 0.3,0.52 1.3,-0.09 3.62,-1.56 0,0 -0.31,2.77 0,0 0.52,1.34 0,0 0.72,0.52 -0.03,1.06 -1.16,1.37 -1.58,5.09 0.01,1.18 0.93,1.7 -1.73,0.3 -0.56,1.18 0.1,0.97 -2.11,1.01 0,0 -0.05,1.06 0,0 0.45,1.62 -0.28,0.49 1.48,1.11 -1.31,0.3 -0.61,0.7 0.42,0.44 -0.93,0.76 0.13,1.73 -0.85,-0.16 -0.56,1.57 0,0 -2.24,0.48 -0.65,0.82 -0.77,-0.36 -1.33,1.34 -2.36,-0.27 -1.05,0.89 -3.13,-0.85 -0.53,0.67 -1.9,-0.47 -1.19,1.55 0,0 1.14,-5.11 -1.28,-1.28 -0.16,-0.75 0.43,-0.5 -1.78,-1.13 0.53,-0.97 -0.8,-0.32 -0.05,-0.62 0,0 0.21,-0.71 -0.43,-0.12 1.26,-1.5 0.1,-1.98 1.12,-0.48 0.29,-1.02 1.01,0.07 -0.08,-0.53 0.85,-0.5 -0.07,-0.71 0.59,-0.12 0.31,-0.72 -1.27,-1.76 -0.96,1.14 -3.66,-0.65 0.26,-3.43 -1.52,-0.67 -2.6,0.49 0.99,-0.99 0.83,-2.02 0.34,-2.48 0,0 1.2,-0.43 1.22,-1.93 1.68,-0.11 z"/>
    <path id="PT-18" title="Viseu" d="m 753.07803,40.19988 1.31,0.65 1.04,1.98 1.67,0.35 0,0 -1.3,3.89 0.26,1.34 -1.31,0.04 0.01,0.92 1.69,0.8 -0.34,1.58 0,0 -1.2,0.9 0,0 -0.18,1.82 -0.73,-0.41 -1.59,2.75 -1.91,-2.37 -1.49,-0.12 -0.79,0.82 -1.33,2.96 1.81,1.34 -0.82,0.85 0.18,0.62 1.77,0.98 -0.51,0.55 0.29,0.73 -0.75,0.58 -0.73,2.48 0.26,0.5 -2.67,0.57 -5.14,2.53 0,0 -1.77,1.05 -2.83,2.81 -2.17,0.81 -2.89,2.16 -1.16,-0.49 -0.45,0.47 -0.25,-0.4 -1.83,0.83 -1.54,-1.44 -0.93,0.14 -0.44,-0.62 -0.42,0.11 0,0 0.04,-1.72 1.18,-1.34 -0.57,-1.85 2.7,-1.04 -1.1,-1.16 -0.74,-2.37 1.99,-0.83 -1.55,-0.78 -0.08,-2.41 -0.92,-0.75 -0.19,-1.19 1.88,-0.71 1.13,-2.85 -0.57,-1.27 0.76,-0.37 1.28,0.77 0.73,-0.83 1.19,0.72 0.84,-0.75 -0.79,-1.3 -0.15,-2.07 1.37,-1.65 -0.06,-0.89 -0.25,-0.19 -1.08,1.45 -1.92,-0.82 -0.59,0.17 0.28,-0.67 -0.96,-0.07 -0.2,-0.56 0.32,-0.09 -0.2,-1.26 -0.85,-0.34 0,0 1.88,-1.18 2.18,0.43 1.25,-0.71 1.36,0.47 3.19,-1.38 1.26,0.12 0,0 1.2,-1.55 1.9,0.47 0.53,-0.67 3.13,0.85 1.05,-0.89 2.35,0.27 1.33,-1.34 0.77,0.36 0.65,-0.83 2.23,-0.46 z m 0.05,13.2 1.01,0.59 0.62,-0.88 -1.23,-0.85 -0.4,1.14 z"/>
    
    <!-- alignment point just for illustration-->
    <circle id="center" cx="600" cy="100" r="2" fill="purple"></circle>

    
  </svg>
</div>
<div class="pop">
  <p>This is the pop-up content.</p>
</div>

The above example uses only SVG coordinates.
If you need to update the alignment point coordinates (e.g center of the window/viewport) you need to translate screen to svg coordinates
(See also SO post "How to convert svg element coordinates to screen coordinates?")

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Scale SVG segment without it moving

Answers