svg：在 hover 事件中更改所有元素的填充

Question

我正在嘗試將 css 更改應用於所有 'class="shape"' 元素，當它們中的任何一個位於 'mouseover' / 'mouseout' state 中時：

 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;
}

Answer 2

您只是在尋找 JS 解決方案嗎？ 如果沒有，這里有一個更簡單的基於 CSS 的解決方案。

 svg { cursor: pointer; } svg:hover path.shape { fill: #f00; } svg:hover path.outline { stroke: #f00; }

 <?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"> <g id="find_out_more"> <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 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>