Работа Javascript + SVG

 
0
 
JavaScript
ava
Karta | 16.02.2013, 20:00
Добрый день, пишу вам со своей проблемой. Мне нужно было нарисовать карту с помощию SVG и добавить эффекты с помощью Javascript.
Карту сделала, все работало хорошо. Дальше мне  нужно было поместить эту карту на aspx форму. Здесь начались проблемы.
Первая проблема в том, что ASPX не может отображать формат картинка.svg ...
поломав голову, я решила попробовать напрямую написать код путей svg на  ASPX форме. Это получилось, карта действительно стала отображаться, но УВЫ не работает теперь эффекты Javascript.

Прилагаю первоночальный код , который работает, если обычную страницу html отобразить в браузере :


<figure id="imapc">

  <object data="example.svg" type="image/svg+xml" id="imap">
<div id="imap"></div>
   <script src="script.js"></script>
  </object>

  <figcaption>Example of an interactive map</figcaption>

</figure>

<script src="script.js"></script>


код script.js


Подсвечиваем регион на карте при наведении мыши на соотв. строку таблицы.
  $("#areas tr").hover(
    function () {
      var id = $(this).attr("id");
      $("#"+id, svgdom).myAddClass("highlight");
    },
    function () {
      var id = $(this).attr("id");
      $("#"+id, svgdom).myRemoveClass("highlight");
    }
  );
  // Подсвечиваем строку в таблице при наведении мыши на соотв. регион на карте
  $(svgdom.getElementsByClassName("area")).hover(
    function () {
      var id = $(this).attr("id");
      $("#areas #"+id).addClass("highlight");
    },
    function () {
      var id = $(this).attr("id");
      $("#areas #"+id).removeClass("highlight");
    }
  );

теперь когда я напрямую пишу svg  на странице  Javascript. не работает...

<figure id="imapc">

<object type="image/svg+xml" id="imap" >

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

  <svg
  xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg2984"
   version="1.1"
viewBox="-5 -20 600 450"
   inkscape:version="0.48.2 r9819"
   width="600"
   height="450"
 <path
     
     d="m 154.0619,367.3114 a 44.82592,35.686653 0 1 1 -89.651843,0 44.82592,35.686653 0 1 1 89.651843,0 z"  
    id="path3191"
     class="area" /> 
  <path
     
     d="m 502.22438,178.43327 a 30.464216,172.34042 0 1 1 -60.92843,0 30.464216,172.34042 0 1 1 60.92843,0 z"
id="path3186"
     class="area" />
  <path
     
     d="m 127.0793,109.23598 a 16.972921,17.843327 0 1 1 -33.945845,0 16.972921,17.843327 0 1 1 33.945845,0 z"
id="path3180"
     class="area" />


Может кто то сталкивался с подобным,  может нужно код js как то переписать, что б заработала карта... Я уже вторую неделю мучаюсь... Не знаю, что и делать smile 
Помогите решить проблему ...
Ответы (1)
ava
Serge78rus | 07.06.2014, 20:55 #
Посмотрите, может найдете что полезное http://svgmnemo.ru/pub/svgdyn.htmlhttp://svgmnemo.ru/pub/svgdyn_p2.html
Зарегистрируйтесь или войдите, чтобы написать.
Фирма дня
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Участники
advanced
Отправить