Есть ли способ сделать объект SVG доступным?

Question

Я работаю с SVG, которые можно посмотреть здесь: http://n1t2.info/

Я просто размещаю в SVG, но из-за улицами карта слоя файла чрезвычайно велико. Тем не менее, вы можете увидеть, если вы нажмете ссылку, что это карта, разделенная на 18 различных путей svg, с несколькими оттенками, затеняющими их. Моя цель с этой картой состоит в том, чтобы сделать каждый из 18 различных разделов кликабельными или быть в состоянии дать им <a href="example.com">. Возможно ли это с помощью SVG?

Редактировать: Комментарий предложил показать, как я создаю файл SVG. Вы можете увидеть мой метод для этого here.

Answer 1

IMO, лучшим решением является элемент SVG <a>.

<svg width="200" height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 

 
    <a xlink:href="http://stackoverflow.com/questions/15532371/do-svg-docs-support-custom-data-attributes"> 
 

 
    <path d="M 100 100 L 300 100 L 200 300 z" fill="orange" stroke="black" stroke-width="3"></path> 
 

 
    </a> 
 

 
</svg>

Answer 2

Поиск на Google подвернулся этот плагин JQuery для украшения карты изображения, которые могут помочь вам достичь вашей цели:

http://www.outsharked.com/imagemapster/default.aspx?what.html

Answer 3

Вы можете справиться с этим довольно легко, добавив a data атрибут для каждого элемента <path>, а затем обрабатывать его через jquery или только javascript.

1. Во-первых, добавить что-то вроде data-url="http://your-url.com" к <path> элемента. Пример: <path data-url="http://your-url.com">.

2. Добавить библиотеку JQuery как раз перед закрытием вашего </body> тега, и сценарий на шаге 3 так же, как:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
          <script> 
            //your script 
          </script> 
        </body> 
   </html> 
   

3. вместо //your script вы вставьте один:

   $(document).ready(function(){ 
        $('path').on('click', function(e){ 
         e.preventDefault(); 
         var url = $(this).data('url'); 
         console.log('Moving to:', url); 
         window.open(url, '_blank'); 
        }); 
   }); 
   

4. Попробуй: http://jsfiddle.net/jpvu852d/