Question

我有一个SVG图像，我希望得到一个数组中的所有颜色十六进制代码。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <g display="inline">
  <title>Layer 1</title>
  <ellipse ry="116" rx="66" id="svg_1" cy="130.7" cx="375.2" stroke-width="3" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="104" rx="68" id="svg_2" cy="133.7" cx="248.2" stroke-width="3" stroke="#000000" fill="#FF0000"/>
  <ellipse ry="73" rx="47" id="svg_3" cy="161.7" cx="231.2" stroke-width="3" stroke="#000000" fill="#FF0000"/>
  <rect id="svg_4" height="77" width="83" y="66.7" x="225.2" stroke-width="3" stroke="#000000" fill="#0000ff"/>
 </g>
</svg>

所以在这种情况下我有3种不同的颜色。然而，总共有8个，因为有复发。

我可以算上一切。

 function count_colours(data){

    return data.match(/#/g).length;

}

显然我得到8加上任何其他的＃。

我遇到的问题是我能想到的任何事情都太重了。如果有的话，我需要一个简单的解决方案。有没有一种简单的方法来实现这一目标？在没有重复的数组中获取所有十六进制代码将是惊人的。

编辑：好的，所以遍历数组并使用..检查十六进制代码是否有效

 var isOk  = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#XXXXX')

然后使用

删除重复项

_.uniq(hex_codes);

但是我如何构建初始数组，这是我正在努力的部分。我会在初始迭代中使用indexOf（）吗？这一切看起来都非常混乱。

Answer 1

这个怎么样？

function count_colours(data) {

   var n = 0, matches, cols = {};
   if (matches = data.match(/\#[0-9A-Fa-f]{3}([0-9A-Fa-f]{3})?/g)) {
      for (var i=0; i<matches.length; i++) {
          if (!cols[matches[i]]) {
             cols[matches[i]] = 1
             n++;
          }
      }
   }
   return n;
}

Demo here

您可能还需要考虑“＃00F”，“＃00f”和“＃0000FF”颜色相同但将单独计算的事实。我假设这些文件是由编辑器或类似的东西生成的，它们在列出颜色的方式上是一致的。

Answer 2

是的，取决于你的约束。

我选择下划线实用功能uniq，因为它不值得编写自己的实现。

http://underscorejs.org/#uniq

此处还有另一个与您的问题相关的答案： Removing duplicate objects with Underscore for Javascript

计算SVG /字符串中的所有十六进制颜色代码

2 个答案: