javascript - innerHTML 在 SVG 上不能正常工作？

Question

使用以下脚本我想更改 [text] 元素的内容颜色(如果它不是“0”)但它只是更改所有 [text] 或什么都不更改。我的失败是什么？

HTML

<svg id="list">
  <g><text class="count" x=20 y=50>0</text></g>
  <g><text class="count" x=60 y=50>8</text></g>
  <g><text class="count" x=100 y=50>15</text></g>
</svg>

JS

$("svg#list").filter(function() {
   return document.getElementsByClassName('.count').innerHTML != '0';
}).css('fill','#ff0000');

My fiddle

Answer 1

另一个解决方案是使用.each()，去思考#list下的每个.count检查文本是否不等于'0' 然后更新 css。

您的代码有问题，document.getElementsByClassName('.count') 返回一个对象数组，因此 .innerHTML 将不起作用。

此外，$("svg#list").filter 只会运行一次，因为只有 1 个元素 #list。

$('#list .count').each(function(){
  if($(this).text() != '0'){
    $(this).css('fill','#ff0000');
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="list">
  <g><text class="count" x=20 y=50>0</text></g>
  <g><text class="count" x=60 y=50>8</text></g>
  <g><text class="count" x=100 y=50>15</text></g>
</svg>