javascript - svg:在悬停事件上更改所有元素的填充

Question

我正在尝试将 css 更改应用于所有处于“鼠标悬停”/“鼠标悬停”状态的“class="shape"”元素:

var shapes = document.getElementsByClassName('shape');
for (var i=0; i<shapes.length; i++){
  shapes[i].addEventListener('mouseover', mouseOver);
  shapes[i].addEventListener('mouseout', mouseOut);
}
function mouseOver(event) {
    event.target.style.fill = 'red';
}

function mouseOut(event) {
    event.target.style.fill = '#333333';
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="160px" height="43px" viewBox="0 0 224.746 60" enable-background="new 0 0 224.746 60" xml:space="preserve"
	 onmouseover="this.style['cursor'] = 'pointer'">
	 
<g id="Fimd_out_more">
	<g>
		<path class="shape" fill="#333333" d="M42.373,19.515h9.488v1.908h-7.188v5.855h6.639v1.882h-6.639v7.972h-2.3V19.515z"/>
		<path class="shape" fill="#333333" d="M56.148,20.926c0,0.784-0.549,1.411-1.464,1.411c-0.836,0-1.385-0.627-1.385-1.411
			s0.575-1.438,1.438-1.438C55.573,19.488,56.148,20.116,56.148,20.926z M53.587,37.132V24.481h2.3v12.651H53.587z"/>
		<path class="shape" fill="#333333" d="M58.919,27.905c0-1.333-0.026-2.378-0.104-3.424h2.039l0.131,2.091h0.052
			c0.627-1.176,2.091-2.352,4.182-2.352c1.751,0,4.47,1.045,4.47,5.384v7.528h-2.3v-7.292c0-2.039-0.758-3.738-2.928-3.738
			c-1.49,0-2.666,1.072-3.084,2.353c-0.104,0.287-0.157,0.679-0.157,1.071v7.606h-2.3V27.905z"/>
		<path class="shape" fill="#333333" d="M83.542,18.574v15.291c0,1.124,0.052,2.405,0.104,3.268h-2.039l-0.104-2.195h-0.079
			c-0.68,1.411-2.195,2.482-4.26,2.482c-3.058,0-5.437-2.587-5.437-6.43c-0.026-4.208,2.614-6.77,5.672-6.77
			c1.96,0,3.241,0.915,3.816,1.908h0.052v-7.554H83.542z M81.268,29.63c0-0.288-0.026-0.68-0.104-0.967
			c-0.34-1.438-1.594-2.64-3.32-2.64c-2.378,0-3.79,2.091-3.79,4.862c0,2.562,1.281,4.679,3.738,4.679
			c1.542,0,2.954-1.046,3.372-2.745c0.079-0.313,0.104-0.627,0.104-0.993V29.63z"/>
		<path class="shape" fill="#333333" d="M102.806,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
			c0-4.208,2.797-6.691,6.273-6.691C100.35,24.22,102.806,26.859,102.806,30.702z M92.795,30.833c0,2.77,1.568,4.862,3.816,4.862
			c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.072-4.835-3.79-4.835C93.972,25.945,92.795,28.454,92.795,30.833z"/>
		<path class="shape" fill="#333333" d="M115.511,33.655c0,1.333,0.026,2.483,0.104,3.477h-2.039l-0.131-2.064h-0.052
			c-0.575,1.019-1.934,2.352-4.182,2.352c-1.986,0-4.365-1.123-4.365-5.541v-7.397h2.3v6.979c0,2.404,0.758,4.052,2.823,4.052
			c1.542,0,2.614-1.072,3.032-2.118c0.131-0.313,0.209-0.731,0.209-1.176v-7.737h2.3V33.655z"/>
		<path class="shape" fill="#333333" d="M121.314,21.449v3.032h3.293v1.751h-3.293v6.822c0,1.568,0.444,2.458,1.725,2.458
			c0.627,0,0.993-0.053,1.333-0.157l0.104,1.751c-0.444,0.157-1.15,0.313-2.039,0.313c-1.072,0-1.934-0.365-2.483-0.967
			c-0.627-0.706-0.889-1.83-0.889-3.319v-6.901h-1.96v-1.751h1.96v-2.353L121.314,21.449z"/>
		<path class="shape" fill="#333333" d="M131.168,27.905c0-1.333-0.053-2.378-0.104-3.424h2.013l0.104,2.065h0.078
			c0.706-1.203,1.882-2.326,3.999-2.326c1.699,0,3.006,1.045,3.555,2.535h0.053c0.392-0.732,0.915-1.254,1.438-1.646
			c0.758-0.575,1.568-0.889,2.771-0.889c1.699,0,4.183,1.098,4.183,5.489v7.423h-2.248v-7.136c0-2.457-0.915-3.895-2.745-3.895
			c-1.333,0-2.326,0.967-2.744,2.065c-0.104,0.34-0.183,0.732-0.183,1.15v7.815h-2.248v-7.58c0-2.013-0.889-3.45-2.64-3.45
			c-1.412,0-2.483,1.15-2.85,2.3c-0.131,0.313-0.183,0.731-0.183,1.124v7.606h-2.248V27.905z"/>
		<path class="shape" fill="#333333" d="M163.633,30.702c0,4.679-3.267,6.717-6.299,6.717c-3.398,0-6.064-2.509-6.064-6.508
			c0-4.208,2.797-6.691,6.273-6.691C161.176,24.22,163.633,26.859,163.633,30.702z M153.622,30.833c0,2.77,1.568,4.862,3.816,4.862
			c2.195,0,3.842-2.065,3.842-4.914c0-2.144-1.071-4.835-3.79-4.835C154.798,25.945,153.622,28.454,153.622,30.833z"/>
		<path class="shape" fill="#333333" d="M165.751,28.428c0-1.49-0.026-2.771-0.104-3.947h2.013l0.104,2.509h0.078
			c0.575-1.699,1.986-2.771,3.529-2.771c0.234,0,0.418,0.026,0.627,0.052v2.169c-0.235-0.052-0.471-0.052-0.784-0.052
			c-1.621,0-2.771,1.202-3.084,2.927c-0.053,0.314-0.079,0.706-0.079,1.072v6.744h-2.3V28.428z"/>
		<path class="shape" fill="#333333" d="M174.533,31.225c0.053,3.11,2.013,4.392,4.34,4.392c1.646,0,2.666-0.288,3.502-0.654l0.418,1.647
			c-0.81,0.365-2.222,0.81-4.234,0.81c-3.895,0-6.221-2.587-6.221-6.403s2.248-6.796,5.934-6.796c4.156,0,5.228,3.607,5.228,5.933
			c0,0.471-0.026,0.811-0.078,1.072H174.533z M181.277,29.578c0.026-1.438-0.602-3.711-3.188-3.711
			c-2.353,0-3.346,2.117-3.529,3.711H181.277z"/>
	</g>
</g>
<g id="outline">
	<path class="outline" fill="none" stroke="#333333" stroke-width="3" d="M222.496,29.95c0,15.832-12.704,28.667-28.377,28.667H30.377
		C14.705,58.616,2,45.781,2,29.95l0,0C2,14.117,14.705,1.283,30.377,1.283h163.742C209.792,1.283,222.496,14.117,222.496,29.95
		L222.496,29.95z"/>
</g>
</svg>

当前代码一次将样式更改应用于一个路径(不是期望的结果) 理想情况下，轮廓路径也会在鼠标悬停时变为红色。

Answer 1

你可以摆脱所有的 JavaScript 代码，只使用这个 CSS:

.shape {
  fill: #333;
}

svg:hover .shape {
  fill: red;
}