Встраиваемые SVG-пути по клику get id

1

Я пытаюсь сохранить идентификатор щелкнутого пути SVG файла, вставленного как объект в документ HTML, но я не могу его получить и до сих пор не понимаю проблему.

Я хотел бы получить кликабельную карту, разделенную на области, которые будут отображать некоторые данные (в данных div #) в зависимости от зоны клика. Данные могут быть извлечены из XML файла.

Возможно, есть более простой подход, чтобы сделать это. Пожалуйста, могу мне помочь?

Спасибо

PARTIAL SVG CODE:

<defs>...
    <style>
        ...
    </style>
</defs>
<title>title here</title>
<g id="group1">
    <path id="zone1" onClick="selected(this.id)"  d="M482.56,0l-2,7a26.85,26.85,0,0,1-.79,4.26,20.67,20.67,0,0,0-.21,3.7,16.67,16.67,0,0,1-3.38,7.38c-1,1.48-.89,3.27-2.54,4.18-.9.5-.89,2.27-1.74,3.23-2.6,2.91-4.88,3.6-8.68,3-2.41-.39-4,2...

HTML-код:

<article id="map">
    <object id="svg" type="image/svg+xml" data="images/mapa.svg">Your browser does not support SVG</object>
    <div id="result">
        <h3>header</h3>
        <div id="data" class="data"></div>
    </div>
</article>

JS CODE:

function selected(clicked_id){
     alert(clicked_id);
};

Почему этот скрипт не показывает идентификатор?

  • 0
    Почему вы должны использовать свою карту в объекте? Можете ли вы использовать его как встроенный SVG?
  • 0
    Здравствуйте, Enxaneta, я пытаюсь сделать HTML чистым и легким в обслуживании, а svg настолько длинен, что делает его беспорядочным.
Показать ещё 2 комментария
Теги:
svg
dom

1 ответ

0

Я пробовал свою логику, и это сработало для меня. Однако одно отличие состоит в том, что фрагмент полностью содержит SVG DOM. Я не знаю, поддерживает ли Stackoverflow загрузку отдельных файлов, которые будут использоваться в качестве внешнего SVG.

В моем фрагменте я использовал jQuery для присоединения событий кликов к пути SVG.

$(".heart").click(function(){
  var color = $(this).attr("fill");
  console.log(color,"clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<h1>Click a heart!</h1>
<svg width="200" height="100" style="background-color: #bada55" >
  <g transform="scale(1.2)">
    <path class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="red"></path>
  </g>
  
  <g transform="scale(0.8) translate(140,40)">
    <path class="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="black"></path>
  </g>
</svg>
  • 0
    Ахмад, спасибо за ваш ответ, но, как я ответил Exaneta, я хочу, чтобы мой svg внешний, потому что это огромный.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню