SVG:按类选择，html with javascript jQuery

Question

几年前，Dan Miller遇到了同样的问题，就像我现在一样，因为他们想要一个函数(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>

从html中，我想按类选择，例如选择所有类">

1. tt"，或选择所有类"au"。尝试使用丹米勒的脚本，试图修复它，但无法做到。
2. 我想覆盖 svg 中设置的值。(更改 .land {填充： #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')

工作代码笔。

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>