Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Скрыть/показать объекты в SVG картинке


Автор: Karta 24.7.2013, 23:49
Добрый вечер,
столкнулась с такой проблемой:

У меня на 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>




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

Спасибо

Автор: Sanchezzz 25.7.2013, 00:16
Добрый, 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.

Автор: Karta 25.7.2013, 00:18
Спасибо.

Автор: Karta 26.7.2013, 15:45
У меня вот только вопрос. Когда я прописываю часть картинки свг на 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>


Что не так делаю?

Автор: Sanchezzz 26.7.2013, 16:27
Вы лучше на jsffidle сделайте демку, потом скажите, какие элементы не скрываются.

Автор: Karta 26.7.2013, 16:41
Вот, попробовала, у меня, что то ни один элемент не скрывается. Я вставлялла свг прямо на страницу.

http://jsfiddle.net/V7fQG/

Автор: Sanchezzz 26.7.2013, 17:49
http://jsfiddle.net/V7fQG/1/

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

#imap g, #imap line, #imap image

Автор: Karta 27.7.2013, 04:11
Спасибо, но дело вот в чем:
когда я прописываю код свг непосредственно на самой странице
Код

<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>



В чем ошибка?

Автор: Sanchezzz 27.7.2013, 13:21
Скорее всего политика безопасности браузера. f12 в консоле браузера должно об этом говорится.

Автор: Karta 29.7.2013, 01:37
Да, я просмотрела консол, выдает ошибку в  мне не известном скрипте overlay.js

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

 в строке 
Код


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


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

Автор: Sanchezzz 29.7.2013, 12:12
Лечится только если загрудить 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){}
})

Автор: Karta 29.7.2013, 23:42
А у Вас это работает? 
Просто результат у меня тот же, хоть с аяксом, хоть без него...

Автор: _zorn_ 30.7.2013, 03:46
Я в своё время заменил object на iframe. Обращаться к объектам и функциям в этом фрейме можно через свойство contentWindow.
Например document.getElementById('svg_frame').contentWindow.document.getElementById('svg_shape'); в главном документе вернет объект в svg с id=svg_shape
И наоборот из svg достучаться до главного, можно с помощью document.defaultView.top.document

Автор: Sanchezzz 30.7.2013, 12:21
Karta, я не проверял, только теоретически предположил должно сработать если на томже хосте что и сам сайт расположен.
С фреймом должно сработать если фрейм относится к этому же сайту. 

Автор: Karta 10.8.2013, 17:54
Посмотрела поискала и все таки нашла ответ:

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, 19:39

У меня еще один вопрос появылся в процессе работы.
Вот у меня есть код, который при нажатии на чекбокс может скрывать /показывать текст

Код

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


А как в таком слуае будет выглядить код, если мне нужно сделать текст в виде подсказки tooltip? Т.е текст на свг картинке изначально не виден, нажимаешь на чекбокс "включить подсказки" и при наведении мышки показывает текст, в теге 
Код
'svg text'
?

Спасибо

Автор: Sanchezzz 10.8.2013, 22:54
Задать на элемент svg text  событие hover и сделать этот эффект, но лучше взять готовый плагин http://onehackoranother.com/projects/jquery/tipsy/

У элемента text должен быть атрибут title который содержит подсказку.
После вставки карты в див  $.get внутри функции выполнить инициализацию


Код

$.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);
   // Здесь выполнить инициализацию
   $('#map text').tipsy();  // или  $('#map [title]').tipsy();
},"xml");


Я не проверял код, но может сработать проверите, должно сработать

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)