SVG,如何评估svg对象的属性

时间:2016-06-13 08:24:19

标签: javascript jquery html css svg

我尝试使用<path>并使用<rect>来区分使用$(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创建的对象。我不知道如何进入他们的孩子财产。我基本上想知道对象是否具有这样的属性。在我的代码中,我想在单击重置按钮时更改两个svg对象的css样式。非常感谢您的帮助。

这是我的代码:

&#13;
&#13;
	#displayWindow {
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	
&#13;
<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>
&#13;
Sub Input_CSV()

Dim Wb As String
Dim Arr

    Set Wb = GetObject(Application.GetOpenFilename("csv file,*.csv", , "please choose a csv file", , False))

    Dim blnImportData As Boolean
    blnImportData = ImportCSV(Wb, "Sheet1", "A1")
    If blnImportData Then MsgBox "Import CSV process complete", vbInformation, ThisWorkbook.Name _
    Else MsgBox "Import CSV process failed", vbCritical, ThisWorkbook.Name

End Sub
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

基本上你想“解开”两个svg对象,对吧?那么为什么不直接将属性应用于两个?..

$(document).ready(function() {
  // reset all the click
  $('#reset').click(function() {
    $('#displayWindow svg').find('path, rect').attr("fill","none");
  }); // end click
}); // end ready
	#displayWindow {
	  border: 1px solid;
	  height: 600px;
	  width: 800px;
	}
	
<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>