JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<img src="https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&h=350" usemap="#imageMap" alt="">

<map name="imageMap" id="map">
  <area shape="poly" id="d" coords="142,202,46,154,123,45,259,191" href="#" alt="">
</map>

JavaScript

const mapToSvg = ($map) => {
	const $areas = [...$map.children]
  
	const $usemap = document.querySelector(`[usemap='#${$map.name}'`)
	const $svg = document.createElement('svg')
  
  $svg.setAttribute('width', $usemap.clientWidth)
  $svg.setAttribute('height', $usemap.clientHeight)
  $svg.setAttribute('viewBox', `0 0 ${$usemap.clientWidth} ${$usemap.clientHeight}`)
  
  const $paths = $areas.map($area => {
  	const $path = document.createElement('path')

    $path.setAttribute('d', `M${$area.coords}`)
    $svg.appendChild($path)

    return $path
  })

  return $svg
}

document.body.appendChild(mapToSvg(map))