пройти циклом по всем id

[asder117]

Уважаемые приветствую! у меня на страницу загружается svg графика. я хочу чтобы после загрузки графики я мог пройти циклом по всем id svg и присвоить им другой цвет.
часть файла svg

Код: Выделить всё

<g id="места">
    <g id="1">
        <rect id="1" x="11.667" y="192" opacity="0.05" fill="#F90606" width="28.667" height="51.333" onmouseover="sendzalb(id);evt.target.setAttribute('opacity', '0.6')" onmouseout="fillOut(evt,'infotext');evt.target.setAttribute('opacity', '0.1')" onclick="fillClick(id)"/>
    </g>
    <g id="127">
        <rect id="127" x="11.667" y="116.667" opacity="0.05" fill="#F90606" width="28.667" height="74.333" onmouseover="sendzalb(id);evt.target.setAttribute('opacity', '0.6')" onmouseout="fillOut(evt,'infotext');evt.target.setAttribute('opacity', '0.1')" onclick="fillClick(id)"/>
    </g>
    <g id="2">
        <rect id="2" x="11.667" y="243.333" opacity="0.05" fill="#F90606" width="28.667" height="43.333" onmouseover="sendzalb(id);evt.target.setAttribute('opacity', '0.6')" onmouseout="fillOut(evt,'infotext');evt.target.setAttribute('opacity', '0.1')" onclick="fillClick(id)"/>
    </g> 

загружаю так -

Код: Выделить всё

$(function(){

    $("#stage").load('img/sxema/zalb.svg',function(response){

        $(this).addClass("svgLoaded");

        
        if(!response){
            // Error loading SVG!
            // Make absolutely sure you are running this on a web server or localhost!
        }
    });
    
    

}); 

и после этого уже недели две бьюсь чтобы сделать вышеизложенное. Заранее спасибо

[iAchilles]

Код: Выделить всё

$("#места g").each(function()
{
    $(this).find('rect').attr('fill', '#CCCCCC');
});

не?

[yan]

не знаю как щас но несколько лет назад к структуре svg прямого доступа через jquery нельзя было получить, я делал через библиотеку http://keith-wood.name/svg.html, вот как пример http://www.bashinfo.ru/map/ - на этой странице из svg забирается и выводится список нас. пунктов, потом на svg элементы вешается тултип

[asder117]

Код: Выделить всё

$("#места g").each(function()
{
    $(this).find('rect').attr('fill', '#CCCCCC');
});

не?

спасибо за ответ. но не работает почему-то. во вторых и главное мне надо пройтись не по тегу rect a по его числовому значению id="1", где 1 меняется от 1 до 127

[asder117]

не знаю как щас но несколько лет назад к структуре svg прямого доступа через jquery нельзя было получить, я делал через библиотеку http://keith-wood.name/svg.html, вот как пример http://www.bashinfo.ru/map/ - на этой странице из svg забирается и выводится список нас. пунктов, потом на svg элементы вешается тултип

я тоже так чувствую но что самое интересное в указанном вами примере там как я понял надо отрисовывать svg в jquery. а как быть если файл svg готов и сформирован к примеру как у меня из адобе.

[yan]

я тоже так чувствую но что самое интересное в указанном вами примере там как я понял надо отрисовывать svg в jquery. а как быть если файл svg готов и сформирован к примеру как у меня из адобе.

с какой стати, вот файл http://www.bashinfo.ru/map/bashmap.svg, все работает на основе его, обращение по ид к

Код: Выделить всё

<object data="/map/bashmap.svg" type="image/svg+xml" id="bashmap" height="500">

[asder117]

я тоже так чувствую но что самое интересное в указанном вами примере там как я понял надо отрисовывать svg в jquery. а как быть если файл svg готов и сформирован к примеру как у меня из адобе.

с какой стати, вот файл http://www.bashinfo.ru/map/bashmap.svg, все работает на основе его, обращение по ид к

Код: Выделить всё

<object data="/map/bashmap.svg" type="image/svg+xml" id="bashmap" height="500">
 

попробую разобрать потом отпишусь

[asder117]

я тоже так чувствую но что самое интересное в указанном вами примере там как я понял надо отрисовывать svg в jquery. а как быть если файл svg готов и сформирован к примеру как у меня из адобе.

с какой стати, вот файл http://www.bashinfo.ru/map/bashmap.svg, все работает на основе его, обращение по ид к

Код: Выделить всё

<object data="/map/bashmap.svg" type="image/svg+xml" id="bashmap" height="500">

попробую разобрать потом отпишусь

попробовал у себя сделать такое на базе своего , а никак не хочет. скрипт вставляю прямо в представление

Код: Выделить всё

<script language="JavaScript">
/*function drawIntro(svg) { 
    //svg.use($('#titles'));
    svg.text(275, 275, 'svg svg svg svg ',{stroke: 'red', strokeWidth: 3,  fontSize: 20}); 
}
*/
function getSVGDOM(){
    var svgobject = document.getElementById('stage');    //находим svg
    if('contentDocument' in svgobject) {                 //проверяем контент
        return jQuery(svgobject.contentDocument);        //получаем доступ к объектной модели SVG
    alert(svgobject.contentDocument)
    }
    
    else return false;
}

jQuery(window).load(function () { 

var svgdom=getSVGDOM();
if(svgdom) {                 //проверяем контент

    //var svg= $('#bashmap').svg({onLoad: drawIntro});

  var obj = document.getElementById("127"); 
                     
                    //var x = event.clientX-20 + "px";
                    //var y = event.clientY+300;
                    //evt.target.setAttributeNS(null, "fill", "red");
                    obj.style.opacity = "1"; //Показываем элемент
                    //obj.style.position = 'absolute';
                    //obj.style.left = x+"px";   // Координаты дива X и Y не забываем указать еденицы измерения,
                    //obj.style.top = y+"px";

 }
  </script>

[yan]

Код: Выделить всё

<script language="JavaScript">
/*function drawIntro(svg) { 
    //svg.use($('#titles'));
    svg.text(275, 275, 'svg svg svg svg ',{stroke: 'red', strokeWidth: 3,  fontSize: 20}); 
}
*/
function getSVGDOM(){
    var svgobject = document.getElementById('stage');    //находим svg
    if('contentDocument' in svgobject) {                 //проверяем контент
        return jQuery(svgobject.contentDocument);        //получаем доступ к объектной модели SVG
    alert(svgobject.contentDocument)
    }
    
    else return false;
}

jQuery(window).load(function () { 

var svgdom=getSVGDOM();
if(svgdom) {                 //проверяем контент

    //var svg= $('#bashmap').svg({onLoad: drawIntro});

  var obj = document.getElementById("127"); 
                     
                    //var x = event.clientX-20 + "px";
                    //var y = event.clientY+300;
                    //evt.target.setAttributeNS(null, "fill", "red");
                    obj.style.opacity = "1"; //Показываем элемент
                    //obj.style.position = 'absolute';
                    //obj.style.left = x+"px";   // Координаты дива X и Y не забываем указать еденицы измерения,
                    //obj.style.top = y+"px";

 }
  </script>

мда, чего сделал то? получили контекст для доступа через jquery, потом почему-то нативной функцией ищем объект, зачем контекст получили не понятно

Код: Выделить всё

jQuery('#127', svgdom).css('opacity','1');

[asder117]

Код: Выделить всё

<script language="JavaScript">
/*function drawIntro(svg) { 
    //svg.use($('#titles'));
    svg.text(275, 275, 'svg svg svg svg ',{stroke: 'red', strokeWidth: 3,  fontSize: 20}); 
}
*/
function getSVGDOM(){
    var svgobject = document.getElementById('stage');    //находим svg
    if('contentDocument' in svgobject) {                 //проверяем контент
        return jQuery(svgobject.contentDocument);        //получаем доступ к объектной модели SVG
    alert(svgobject.contentDocument)
    }
    
    else return false;
}

jQuery(window).load(function () { 

var svgdom=getSVGDOM();
if(svgdom) {                 //проверяем контент

    //var svg= $('#bashmap').svg({onLoad: drawIntro});

  var obj = document.getElementById("127"); 
                     
                    //var x = event.clientX-20 + "px";
                    //var y = event.clientY+300;
                    //evt.target.setAttributeNS(null, "fill", "red");
                    obj.style.opacity = "1"; //Показываем элемент
                    //obj.style.position = 'absolute';
                    //obj.style.left = x+"px";   // Координаты дива X и Y не забываем указать еденицы измерения,
                    //obj.style.top = y+"px";

 }
  </script>

мда, чего сделал то? получили контекст для доступа через jquery, потом почему-то нативной функцией ищем объект, зачем контекст получили не понятно

Код: Выделить всё

jQuery('#127', svgdom).css('opacity','1');
 

блин и правда. да позднее время сказывается. спасибо за подсказку. попробовал сделать как вы указали. онон не пашет может это из-за того что я не подгрузил в начале енто??

Код: Выделить всё

<script language="JavaScript" src="/js/jquery.svg.js"></script>
<script language="JavaScript" src="/js/jquery.svgdom.js"></script>
<script language="JavaScript" src="/js/jquery.tooltip.min.js"></script>