VPF::Работа Javascript + SVG - Форум программистов

Karta

Дата 16.2.2013, 19:00 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 117
Регистрация: 4.6.2009

Репутация: нет
Всего: 0

Добрый день, пишу вам со своей проблемой. Мне нужно было нарисовать карту с помощию 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

Помогите решить проблему ...

Это сообщение отредактировал(а) Aliance - 18.2.2013, 10:25

Serge78rus

Дата 7.6.2014, 20:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 15.4.2014
Где: Санкт-Петербург Р оссия

Репутация: нет
Всего: нет

Посмотрите, может найдете что полезное http://svgmnemo.ru/pub/svgdyn.html, http://svgmnemo.ru/pub/svgdyn_p2.html

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »