SVG：按类选择，带有 javascript jQuery 的 html

Question

几年前，Dan Miller 拥有the same problem，就像我现在一样，因为他们想要一个函数 (JavaScript) 来按类获取 SVG 元素。 Dan 提出了一个函数，但用户无法运行它：

function getSvgElemByClass(svgRoot,classSearchStr) {
// modification of Dustin Diaz's find by class script - http://www.dustindiaz.com/getelementsbyclass/
    return( 
        function getSvgElementsByClass(searchClass,node,tag) {
            var classElements = new Array();
            if ( node == null )
                node = document;

            if ( tag == null )
                tag = '*';

            // SVG = XML, so we need the XML method:
            // using 'magic' namespace variable provided by websvg (svgns)
            var els = node.getElementsByTagNameNS(svgns,tag);
            var elsLen = els.length;
            var pattern = new RegExp('(^|\\\\s)'+searchClass+'(\\\\s|$)');

            for (i = 0, j = 0; i < elsLen; i++) {
                // SVG specific helper
                if(els[i].hasAttribute('class') &&
                    pattern.test(els[i].getAttribute('class')) ) {
                        classElements[j] = els[i];
                    j++;
                } else if ( pattern.test(els[i].className) ) {
                    classElements[j] = els[i];
                    j++;
                }
            }
            return classElements;
        }
    )(classSearchStr,svgRoot)
}

.svg 文件可能如下所示：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg1024" viewBox="0 0 20 20" width="20" height="20">

<style id="style_css_sheet" type="text/css">

.land
{
   fill: #00ff00;   
   stroke-width: 0.2;
   stroke: #e0e0e0;
}
.aa, .ab
 {
   fill:       #ff0000;
  }
  </style>

  <g class="land bg"
  id="A">
    <path d="M 0,5 H 5 V 0 H 0 Z"
       id="aa" class="land er bg"/>
    <path d="m 10,5 h 5 V 0 h -5 z"
       id="ab" class="land er bg"/>
    <path d="m 5,5 h 5 V 0 H 5 Z"
       id="ac" class="land tt bg"/>
  </g>
  <path d="M 0,10 H 5 v -5 H 0 Z"
     id="ba" class="land er au"/>
  <path d="m 10,10 h 5 v -5 h -5 z"
     id="bb" class="land tt au"/>
  <path d="m 5,10 h 5 v -5 H 5 Z"
     id="bc" class="land er au"/>
  <path d="M 0,15 H 5 V 10 H 0 Z"
     id="ca" class="land tt bg"/>
  <path d="m 10,15 h 5 V 10 h -5 z"
     id="cb" class="land tt au"/>
  <path d="m 5,15 h 5 V 10 H 5 Z"
     id="cc" class="land er bg"/>
</svg>

1. 从 html 我想按类选择，例如选择所有类“tt”，或选择所有类“au”。尝试使用 Dan Miller 的脚本，尝试修复它，但无法做到。
2. 我想覆盖 svg 中设置的值。 （更改 .land {fill: #00ff00;}）

我用这个脚本

• https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js

这样我就可以按 id 绘制。如果我删除 .land{...}:

var element = SVG.get('fi');
element.fill('#f06')

如何按班级选择？怎么办，这样我就可以保留默认颜色 (.land{...})？

Answer 1

只需使用 jQuery 按类更改填充：

$('.land').css('fill', '#0000ff')

工作Codepen。

Answer 2

你在标题中提到了 jQuery，但后来只提到了 Javascript。

jQuery 不是必需的。现代浏览器有document.getElementsByClassName() 方法。

var  tt = document.getElementsByClassName("tt");
Array.from(tt).forEach(function(item) {
   item.style.fill = "#0000ff";
});

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   id="svg1024" viewBox="0 0 20 20" width="20" height="20">

<style id="style_css_sheet" type="text/css">

.land
{
   fill: #00ff00;   
   stroke-width: 0.2;
   stroke: #e0e0e0;
}
.aa, .ab
 {
   fill:       #ff0000;
  }
  </style>

  <g class="land bg"
  id="A">
    <path d="M 0,5 H 5 V 0 H 0 Z"
       id="aa" class="land er bg"/>
    <path d="m 10,5 h 5 V 0 h -5 z"
       id="ab" class="land er bg"/>
    <path d="m 5,5 h 5 V 0 H 5 Z"
       id="ac" class="land tt bg"/>
  </g>
  <path d="M 0,10 H 5 v -5 H 0 Z"
     id="ba" class="land er au"/>
  <path d="m 10,10 h 5 v -5 h -5 z"
     id="bb" class="land tt au"/>
  <path d="m 5,10 h 5 v -5 H 5 Z"
     id="bc" class="land er au"/>
  <path d="M 0,15 H 5 V 10 H 0 Z"
     id="ca" class="land tt bg"/>
  <path d="m 10,15 h 5 V 10 h -5 z"
     id="cb" class="land tt au"/>
  <path d="m 5,15 h 5 V 10 H 5 Z"
     id="cc" class="land er bg"/>
</svg>