SVG, как оценить свойство объекта svg

Question

Я пытаюсь дифференцировать объект, созданный с помощью <path> и используя <rect>. Я не знаю, как получить доступ к их имуществу детей. Я в основном хочу знать, обладает ли объект таким свойством. И в моем коде я хочу изменить стиль css для обоих объектов svg, когда я нажимаю кнопку сброса. Огромное спасибо за помощь.

Вот мой код:

$(document).ready(function() { 
 
    // reset all the click 
 
    $('#reset').click(function() { 
 
    $('#displayWindow svg').each(function() { 
 
     if ($(this).hasOwnProperty('path')) 
 
     $(this).children('path').css('fill', 'none'); 
 
     else if ($(this).children() == 'rect') 
 
     $(this).children('rect').css('fill', 'none'); 
 
    }); // end each 
 
    }); // end click 
 
}); // end ready

\t #displayWindow { 
 
\t border: 1px solid; 
 
\t height: 600px; 
 
\t width: 800px; 
 
\t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="displayWindow"> 
 
    <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="blue" stroke="blue"> 
 
    </svg> 
 
    <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">2</text> 
 
    <rect width="120" height="120" x="15" y="15" fill="blue" stroke="blue"> 
 
    </svg> 
 
</div> 
 
<h1 id="test"></h1> 
 
<br> 
 
<button id="reset">Reset</button>

Answer 1

В основном вы хотели бы "unfill" оба объекта .SVG, не так ли? Тогда почему бы не применить атрибут непосредственно к обоим? ..

$(document).ready(function() { 
 
    // reset all the click 
 
    $('#reset').click(function() { 
 
    $('#displayWindow svg').find('path, rect').attr("fill","none"); 
 
    }); // end click 
 
}); // end ready

\t #displayWindow { 
 
\t border: 1px solid; 
 
\t height: 600px; 
 
\t width: 800px; 
 
\t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="displayWindow"> 
 
    <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="blue" stroke="blue"> 
 
    </svg> 
 
    <svg height="150" width="150" style="position:relative; left:5; top:5;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">2</text> 
 
    <rect width="120" height="120" x="15" y="15" fill="blue" stroke="blue"> 
 
    </svg> 
 
</div> 
 
<h1 id="test"></h1> 
 
<br> 
 
<button id="reset">Reset</button>