html - html - 图像和 svg 元素

Question

我正在制作交互式地图，但无法在其上放置图像。.svg 地图是在 Inkscape 上开发的，并分为区域。

我需要在这些区域中放置图像。

我为此编写了一些代码，但它只能在 Firefox 浏览器中运行。当我用鼠标指向此图像时，整个页面开始滞后。在 Opera 和 Chrome 浏览器中，此图像以低分辨率显示。

图片上从开始到本区的这部分代码包括：

<svg version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 1771.6535
1771.6535" style="enable-background:new 0 0 1771.6535 1771.6535;" xml:space="preserve">
		
  <defs>
    <pattern id="img1" width="100" height="100" patternUnits="objectBoundingBox">
      <image xlink:href="./Regions/Arbuzinka.png" x="-5%" y="-5%" width="30%" height="30%" />
    </pattern>
  </defs>
  
		
  <a class="Arbuzinka" href="http://arbuzinkabib.tk">
    <g
      inkscape:groupmode="layer"
      id="layer18"
      inkscape:label="Арбузинка"
      style="display:inline"
      transform="translate(0,719.29131)">
      <path
        class="region"
        d="m 629.95741,-565.91816 -8.12988,-0.12207 -0.0732,5.44434 -6.5918,-0.19532
        -0.34179,8.44727 -4.68754,-0.0244 -0.1709,6.03027 -2.417,5.46875 1.001,10.4248
        1.3183,5.78614 2.6368,19.09179 -6.2989,3.24707 0.708,11.18164 -67.1374,30.41936
        -0.5006,20.95771 5.9731,2.90024 0.086,0.0345 -2.7967,12.74035 -11.1862,15.28424
        -3.1616,2.51465 -2.1179,3.76587 3.1298,3.97637 -2.2326,19.18647 8.5855,17.2133
        6.2925,6.95713 4.7647,3.50446 6.2972,0.34025 5.5664,9.79005 5.1514,13.35449
        3.7598,7.56836 1.1718,3.51562 3.125,3.90625 2.5391,4.29688 -0.1953,1.95312 -1.3672,3.32032 -1.1719,3.90625 -1.3672,2.73437 -2.539,2.92969 -1.7578,4.10156
        -0.586,1.95313 1.3672,1.75781 3.125,1.75781 2.5391,1.5625 2.9297,0.78125
        3.9062,0.58594 2.3438,0 3.7109,0.58594 2.3438,1.17187 3.3203,1.36719 3.5156,2.14844
        2.3437,1.75781 1.7579,0.68359 1.6601,1.85547 1.2695,0.68359 -0.3906,2.63672
        -0.5859,3.51563 -0.6836,1.36719 -0.293,2.14843 0.7813,1.17188 0.9765,1.75781
        2.5606,6.38337 0.6215,1.38107 0.6215,1.86444 0.2762,1.9335 c 0,0 0.2762,0.69053
        0.1381,0.96675 -0.1381,0.27621 -0.5524,1.93349 -0.5524,1.93349 l 0.069,1.31202
        -0.8977,1.86444 c 0,0 -0.1381,1.24296 -0.2071,1.58823 -0.069,0.34526 0.069,1.51917
        0.069,1.79538 0,0.27622 0.069,0.82864 0.069,1.24297 0,0.41432 -0.2072,1.86444
        -0.2072,1.86444 l -0.1192,2.92068 0.293,1.36719 -0.4883,1.75781 0,0.87891 0,1.46484
        0.293,1.07422 0.6836,0.78125 1.3672,1.36719 c 0,0 0.8789,1.17187 1.0742,1.5625
        0.1953,0.39062 0.7812,0.78125 0.8789,1.46484 0.098,0.6836 0.098,1.17188
        0.098,1.17188 0,0 0.098,0.19531 0.3906,0.78125 0.293,0.58593 0.6836,1.36718
        0.6836,1.36718 l 0.098,0.48829 8.00789,-1.07422 27.83203,-7.22657 -0.87891,-8.00781
        -2.24609,-8.10547 3.80859,-0.58593 -0.0977,-4.88282 5.95703,-2.24609 0.97656,-
        4.98047 2.24609,-2.05078 2.83204,3.61328 12.98828,29.88281 6.83593,-1.46484
        3.61329,-2.05078 20.50781,-3.71094 12.5,-3.71094 -1.75781,-16.11328 0.92773,-3.36914
        20.70313,-1.95312 1.31835,7.61718 1.98143,5.99878 6.90529,-0.38354 11.42578,-2.88086
        -3.72627,-19.28154 0.62148,-2.27876 6.90534,-1.0358 -3.93605,-25.3426 -1.45012,-
        3.79793 -1.24296,-2.20971 2.48592,-1.45012 8.15516,-1.29299 4.58985,-0.73243
        3.95508,-1.61132 0.73242,-1.07422 -0.87891,-5.07813 -2.24609,-7.91015 -16.37911,-
        67.99604 -1.79539,-7.18155 -5.52427,-24.72112 -1.51917,-2.34781 -0.7098,-4.19881
        -6.34765,0.14649 -1.07422,-1.12305 -1.31836,-11.18164 -7.66602,-2.7832 -3.18565,-
        15.6627 0.69053,-2.62403 5.38617,-0.13811 -5.52428,-45.16092 2.62403,0.27621
        0.82864,-0.82864 -1.60069,-14.76806 -4.29687,0.29297 0.39062,-18.65235 -3.22265,0
        -4.10157,9.66797 -7.74675,9.71784 -14.95832,1.8056 -8.1543,4.66308 -1.46484,-
        29.19921 -3.95508,-1.61133 -3.51563,0.75684 -32.32422,14.55077 -5.88379,1.00098
        -0.78125,-0.0732 -0.63476,-0.43946 -0.53711,-0.63476 -1.87988,-4.3457 1.66015,-
        2.70996 2.27051,0.39062 -4.69971,-19.86694 -2.47802,-3.32642 z"
        id="path3343"
        fill="url(#img1)"
        inkscape:connector-curvature="0" />
    </g>
  </a>

感谢您的任何帮助。

标签： htmlcsssvg