Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Скрыть/показать объекты в SVG картинке 
:(
    Опции темы
Karta
Дата 24.7.2013, 23:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
Добрый вечер,
столкнулась с такой проблемой:

У меня на html  странице есть svg картинка, и мне нужно  Скрыть объекты  по чекбоксу . Дело в том, что моя свг картинка не содержит ни атрибута class ни id. Подскажите как это реализовать?

Вот картинка на странице:
Код


 <object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap"></div>

  </object>


А вот объект свг , который нужно скрыть на картинке
Код

<g transform="translate(163.5 261)">

<path width="211" height="90" d="M 0 10 L 201 0 L 211 90 L 0 10 z" style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Red; opacity: 1;" transform="translate(-105.5 -45)" />

</g>

<g transform="translate(281.5 30.5)">

<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: Black; opacity: 1;" transform="translate(-22.5 29)">
<tspan x="0" y="-19.5" fill="Black">ооо</tspan></text></g>




Как этого добиться? Может кто что- то подскажет?

Спасибо
PM MAIL   Вверх
Sanchezzz
Дата 25.7.2013, 00:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Добрый,  http://jsfiddle.net/8B4f9/ 

Код

<object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap" style="border:1px solid red; padding:50px;">
  <g transform="translate(163.5 261)">
<path width="211" height="90" d="M 0 10 L 201 0 L 211 90 L 0 10 z" style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Red; opacity: 1;" transform="translate(-105.5 -45)" />
</g>
<g transform="translate(281.5 30.5)">
<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: Black; opacity: 1;" transform="translate(-22.5 29)">
<tspan x="0" y="-19.5" fill="Black">ооо</tspan></text></g>  
    
</div>
</object>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>


Код

$(function(){
    $('#hide_obj').click( function(e){
       var _this = $(this);
        return (!_this.is(':checked'))  
          ? $('object#imap g').show() : $('object#imap g').hide();

    });

});


svg элементы такие же элементы DOM.


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 25.7.2013, 00:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

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


Это сообщение отредактировал(а) Karta - 26.7.2013, 15:45
PM MAIL   Вверх
Karta
Дата 26.7.2013, 15:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
У меня вот только вопрос. Когда я прописываю часть картинки свг на html  странице как  у Вас, у меня все работает, а когда это нужно применить для всей свг картинки, то нет.


Вот я прописываю на странице
Код

<div>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>
<object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap" >
    
</div>
</object></div>

<script>
$(function(){

    $('#hide_obj').click( function(e){
       var _this = $(this);
        return (!_this.is(':checked'))  
          ? $('object#imap g').show() : $('object#imap g').hide();

    });


});
</script>


Что не так делаю?
PM MAIL   Вверх
Sanchezzz
Дата 26.7.2013, 16:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Вы лучше на jsffidle сделайте демку, потом скажите, какие элементы не скрываются.


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 26.7.2013, 16:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
Вот, попробовала, у меня, что то ни один элемент не скрывается. Я вставлялла свг прямо на страницу.

http://jsfiddle.net/V7fQG/
PM MAIL   Вверх
Sanchezzz
Дата 26.7.2013, 17:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
http://jsfiddle.net/V7fQG/1/

У укажите те теги которые хотите скрывать через 

#imap g, #imap line, #imap image


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 27.7.2013, 04:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
Спасибо, но дело вот в чем:
когда я прописываю код свг непосредственно на самой странице
Код

<div>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>
<object data="p.svg" type="image/svg+xml" id="imap" >
<div id="imap" >
    <?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="350" height="451" xml:space="preserve">
<desc>Created with Fabric.js 1.0.2</desc>
<image x="0" y="0" width="350" height="451" preserveAspectRatio="none"  style="opacity:1">
</image>
    <g transform="translate(102.5 99)">
    <path width="105" height="100" d="M 0 31 L 63 0 L 105 100 L 0 31 z
" style="stroke: Black; stroke-width: 1; stroke-dasharray: 
; fill: LightGray; opacity: 1;" transform="translate(-52.5 -50)" /></g>
<g transform="translate(163.5 261)"><path width="211" height="90" d="M 0 10 L 201 0 L 211 90 L 0 10 z"
 style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Red; opacity: 1;" transform="translate(-105.5 -45)" /></g>
<g transform="translate(123 373.5)"><path width="130" height="91" d="M 0 34 L 87 0 L 87 91 L 130 80 L 0 34 z"
 style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Yellow; opacity: 1;" transform="translate(-65 -45.5)" /></g>
<g transform="translate(256 389.5)"><path width="98" height="85" 
d="M 0 0 L 98 5 L 98 81 L 11 85 L 0 0 z" style="stroke: Black; stroke-width: 1;
 stroke-dasharray: ; fill: Blue; opacity: 1;" transform="translate(-49 -42.5)" /></g>
<line x1="107" y1="93" x2="284" y2="36" style="stroke: Black; stroke-width: 1;
 stroke-dasharray: ; fill: Black; opacity: 1;" /><rect x="-25" y="-25" rx="0" ry="0"
 width="50" height="50" style="stroke: LightGray; stroke-width: 1; stroke-dasharray: ;
 fill: LightGray; opacity: 1;" transform="translate(284 36)" />
<g transform="translate(281.5 30.5)"><text font-family="'Times New Roman'" font-size="30"
 font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: ;
 fill: Black; opacity: 1;" transform="translate(-22.5 29)"><tspan x="0" y="-19.5"
 fill="Black">ооо</tspan></text></g><line x1="189" y1="255" x2="270"
 y2="129" style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Black; opacity: 1;" />
<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" style="stroke: LightGray; stroke-width: 1;
 stroke-dasharray: ; fill: Red; opacity: 1;" transform="translate(270 129)" />
<g transform="translate(266.5 123.5)">
<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; stroke-width: 1; 
stroke-dasharray: ; fill: Black; opacity: 1;" transform="translate(-21.5 29)"><tspan x="0" y="-19.5" fill="Black">111</tspan></text></g>
<line x1="123" y1="372" x2="69" y2="296" style="stroke: Black; stroke-width: 1;
 stroke-dasharray: ; fill: Black; opacity: 1;" />
<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" style="stroke: LightGray; stroke-width: 1;
 stroke-dasharray: ; fill: Blue; opacity: 1;" transform="translate(69 296)" /><g transform="translate(65.5 290.5)">
<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; 
stroke-width: 1; stroke-dasharray: ; fill: Black; opacity: 1;" transform="translate(-22.5 29)">
<tspan x="0" y="-19.5" fill="Black">222</tspan></text></g>
<line x1="244" y1="394" x2="315" y2="215" style="stroke: Black; stroke-width: 1; 
stroke-dasharray: ; fill: Black; opacity: 1;" />
<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" style="stroke: LightGray; stroke-width: 1;
 stroke-dasharray: ; fill: Yellow; opacity: 1;" transform="translate(315 215)" /><g transform="translate(312.5 209.5)">
<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray:
 ; fill: Black; opacity: 1;" transform="translate(-22.5 29)"><tspan x="0" y="-19.5" fill="Black">333</tspan></text></g>
</svg>
</div>
</object></div>


<script>
$(function(){
    $('#hide_obj').click( function(e){
       var _this = $(this);
        return (!_this.is(':checked'))  
          ? $('object#imap text').show() : $('object#imap text').hide();
    });
});

</script>



У меня все отлично работает, но когда я пишу на html  странице только путь к свг картинке у меня ничего не работает, никакого события не происходит
Код

<div>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>
<object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap" >
  
</div>
</object></div>


<script>

$(function(){
    $('#hide_obj').click( function(e){
       var _this = $(this);
        return (!_this.is(':checked'))  
          ? $('object#imap text').show() : $('object#imap text').hide();
    });
});

</script>



В чем ошибка?

Это сообщение отредактировал(а) Karta - 27.7.2013, 04:16
PM MAIL   Вверх
Sanchezzz
Дата 27.7.2013, 13:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Скорее всего политика безопасности браузера. f12 в консоле браузера должно об этом говорится.


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 29.7.2013, 01:37 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
Да, я просмотрела консол, выдает ошибку в  мне не известном скрипте overlay.js

Use of Mutation Events is deprecated. Use MutationObserver instead. @ chrome://y2layers/content/overlay.js:242

 в строке 
Код


        window.content.addEventListener("DOMNodeInserted", y2layers.yontooNodeInserted, false);


Это можно как нибудь исправить?

Это сообщение отредактировал(а) Karta - 29.7.2013, 01:38
PM MAIL   Вверх
Sanchezzz
Дата 29.7.2013, 12:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Лечится только если загрудить Svg через аякс и вставить в пустой 


Код

<div>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>
<object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap" >
  
</div>
</object></div>


Код

$.ajax({
 url: '/map.svg',   
 type:'get',
 success: function(data){
    $('#map').html(data);            
 },
 error: function(e){}
})



--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 29.7.2013, 23:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
А у Вас это работает? 
Просто результат у меня тот же, хоть с аяксом, хоть без него...
PM MAIL   Вверх
_zorn_
Дата 30.7.2013, 03:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1077
Регистрация: 21.8.2007

Репутация: 1
Всего: 12
Я в своё время заменил object на iframe. Обращаться к объектам и функциям в этом фрейме можно через свойство contentWindow.
Например document.getElementById('svg_frame').contentWindow.document.getElementById('svg_shape'); в главном документе вернет объект в svg с id=svg_shape
И наоборот из svg достучаться до главного, можно с помощью document.defaultView.top.document
PM MAIL   Вверх
Sanchezzz
Дата 30.7.2013, 12:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60
Karta, я не проверял, только теоретически предположил должно сработать если на томже хосте что и сам сайт расположен.
С фреймом должно сработать если фрейм относится к этому же сайту. 


--------------------
Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.
PM MAIL Skype GTalk   Вверх
Karta
Дата 10.8.2013, 17:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


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

Репутация: нет
Всего: 0
Посмотрела поискала и все таки нашла ответ:

1. Нужно добавить код:

Код

$.get('map.svg',
function(svgDoc){
  //import contents of the svg document into this document
  var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
  //append the imported SVG root element to the appropriate HTML element
  $("#imap").append(importedSVGRootElement);
},
"xml");


2. А потом просто изметить в коде object#imap g на svg g. Будет примерно так:
Код

 $(function () {
        $('#hide_obj1').click(function (e) {
            var _this = $(this);
            return (!_this.is(':checked'))
              ? $('svg g').show() : $('svg g').hide();
        });
    });





Это сообщение отредактировал(а) Karta - 10.8.2013, 17:56
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1735 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.