SVG、svgオブジェクトのプロパティを評価する方法

Question

私は<path>を使用して作成したオブジェクトと<rect>を使用して差分を試みています。私は子供の財産にアクセスする方法を知らない。私は基本的にオブジェクトがそのような特性を持っているかどうかを知りたい。私のコードでは、リセットボタンをクリックすると、両方のsvgオブジェクトのCSSスタイルを変更したいと思います。助けてくれてありがとうございました。ここで

が私のコードです：

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