Place SVG path-objects with coordinates to connect them (HTML)-CodePudding

I am making interactive SVG-Map of United States, and created each state with SVG path and saved them to my directory

Now i need to place them ideally with coordinates (with no breaks between them)

Also each state will be interactive, so maybe I need to use one tag for each

The problem is the SVG paths have no coordinates, just placing on the field created with tag

Is there a way to place them like that?

I want something like that: enter image description here

CodePudding user response：

Use an <svg> element with a raster <image> as the background, then create an SVG <path> for each state, containing a <title> with the state name. Note that I’ve only done the western states in this example, but it gives you the idea.

I’d also recommend Boxy SVG to set up your paths. Open the raster map in Boxy SVG, draw your paths around each state, give each path a title, save the file, then open the file in a text editor and copy the path information.

.us-map path:hover {
    stroke: black;
    fill: black;
    stroke-width: 4px;
    fill-opacity: .1;
}

<svg  viewBox="0 0 2347 1147" xmlns="http://www.w3.org/2000/svg">
<image width="1816" height="1186" href="https://donald.net.au/bugs/united-states.webp"></image>
  <path fill="transparent" d="M 511.643 305.122 L 479.158 463.467 L 688.505 493.256 L 704.549 333.512 L 511.643 305.122 Z">
    <title>Wyoming</title>
  </path>
  <path fill="transparent" d="M 397.213 405.913 L 350.343 601.765 L 515.41 632.24 L 537.397 471.013 L 479.348 463.768 L 487.048 424.347 L 397.213 405.913 Z">
    <title>Utah</title>
  </path>
  <path fill="transparent" d="M 748.964 500.538 L 735.783 659.824 L 516.257 632.856 L 538.013 472.065 L 748.964 500.538 Z">
    <title>Colorado</title>
  </path>
  <path fill="transparent" d="M 218.683 360.113 L 396.597 405.422 L 342.666 632.388 L 323.278 626.727 L 314.383 650.526 L 318.529 670.298 L 313.35 676.233 L 185.011 481.511 L 192.605 468.058 L 188.088 460.034 L 218.683 360.113 Z">
    <title>Nevada</title>
  </path>
  <path fill="transparent" d="M 513.784 633.64 L 479.379 855.586 L 507.229 861.017 L 508.656 844.679 L 569.338 853.293 L 569.66 844.071 L 685.837 857.964 L 701.845 657.42 L 513.784 633.64 Z">
    <title>New Mexico</title>
  </path>
  <path fill="transparent" d="M 351.556 602.537 L 514.189 631.953 L 480.505 854.752 L 411.541 845.047 L 289.889 775.318 L 291.471 766.683 L 302.825 762.469 L 296.844 747.43 L 306.624 724.055 L 321.362 706.588 L 314.989 678.547 L 317.962 665.455 L 314.423 654.227 L 320.93 629.715 L 345.178 629.921 L 351.556 602.537 Z">
    <title>Arizona</title>
  </path>
  <path fill="transparent" d="M 97.605 322.715 L 88.441 326.166 L 94.096 338.013 L 82.728 355.158 L 83.809 366.435 L 64.827 384.738 L 74.074 406.35 L 74.631 419.624 L 70.468 439.361 L 62.095 446.509 L 70.672 449.807 L 82.886 478.858 L 75.425 487.413 L 84.179 494.62 L 99.557 487.111 L 133.617 492.355 L 100.238 496.349 L 101.643 512.065 L 91.053 507.309 L 85.473 543.911 L 92.514 550.423 L 92.621 562.619 L 105.656 596.614 L 116.276 608.671 L 113.313 640.015 L 118.182 652.5 L 141.499 659.836 L 184.2 689.662 L 178.883 698.399 L 180.915 703.735 L 200.114 703.566 L 198.894 716.395 L 211.447 732.427 L 205.095 749.795 L 212.257 749.958 L 212.42 757.009 L 301.641 765.387 L 298.347 747.165 L 307.599 722.124 L 320.9 706.163 L 314.157 677.026 L 184.996 480.051 L 190.932 463.826 L 185.245 459.866 L 218.444 360.7 L 97.605 322.715 Z">
    <title>California</title>
  </path>
  <path fill="transparent" d="M 190.409 182.94 L 161.124 168.189 L 160.454 182.98 L 143.85 200.45 L 137.129 215.035 L 136.067 224.818 L 101.495 286.629 L 90.699 287.851 L 96.133 296.133 L 97.409 322.27 L 313.2 385.955 L 349.297 263.843 L 364.281 255.17 L 350.243 227.491 L 292.559 211.943 L 229.292 211.877 L 192.076 195.992 L 190.409 182.94 Z">
    <title>Oregon</title>
  </path>
  <path fill="transparent" d="M 236.93 75.544 L 240.504 89.429 L 238.407 109.064 L 242.402 123.518 L 232.388 120.676 L 219.578 141.312 L 223.257 104.724 L 198.835 99.016 L 175.988 79.385 L 174.556 94.812 L 177.535 104.354 L 165.515 133.824 L 171.821 141.561 L 171.821 147.786 L 163.379 157.854 L 190.221 172.993 L 193.733 179.546 L 193.564 194.436 L 227.865 209.555 L 293.39 210.922 L 349.394 225.756 L 384.526 114.711 L 236.93 75.544 Z">
    <title>Washington</title>
  </path>
  <path fill="transparent" d="M 411.048 121.333 L 401.366 153.017 L 420.919 183.632 L 431.434 224.968 L 423.195 244.274 L 420.705 260.076 L 431.161 256.006 L 436.828 291.326 L 452.349 316.892 L 491.934 320.807 L 497.814 325.793 L 506.725 325.793 L 485.309 425.67 L 312.246 385.797 L 347.864 262.819 L 384.564 262.393 L 349.515 227.636 L 386.736 112.644 L 411.048 121.333 Z">
    <title>Idaho</title>
  </path>
  <path fill="transparent" d="M 412.018 120.703 L 401.983 153.058 L 421.195 185.412 L 432.453 226.671 L 423.571 242.467 L 420.072 260.092 L 431.461 255.931 L 437.483 291.846 L 452.759 316.144 L 492.806 321.061 L 496.878 325.646 L 507.028 326.397 L 510.321 305.93 L 706.137 333.04 L 724.575 175.707 L 412.018 120.703 Z">
    <title>Montana</title>
  </path>
</svg>