У меня небольшой HTML файл со встроенным объектом SVG. Существует несколько путей с окрасками по умолчанию в качестве заливок, и я пытаюсь использовать CSS, чтобы переопределить эти заливки безуспешно. Ниже приведен мой полный проект, включая HTML, JS, SVG и SSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<title>OMIX Map</title>
</head>
<body>
<h1>OMIX MAP</h1>
<div id="map">
<object id="map-svg" type="image/svg+xml" data="images/map.svg" onload="loadSVG()"></object>
</div>
</body>
</html>
JS:
// Get all elements of class 'metabolite' of a document.
getMetabolite = function(doc) {
var metabolite = doc.querySelectorAll('g.Metabolite');
return metabolite;
}
// Set event listener to array of 'metabolite' elements.
setEventListenerMetabolite = function(metabolite) {
metabolite.forEach(function(element) {
element.addEventListener('mouseenter', function() {
this.classList.toggle('metabolite_hover');
});
element.addEventListener('mouseleave', function() {
this.classList.toggle('metabolite_hover');
});
});
}
// Get elements of SVG on load.
loadSVG = function() {
var a = document.getElementById("map-svg");
var svgDoc = a.contentDocument;
var metabolite = getMetabolite(svgDoc);
var reaction = getReaction(svgDoc);
setEventListenerMetabolite(metabolite);
}
SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:omix="http://www.omix.bio/xsd/omixsvg" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="tiny" height="2541" version="1.2" width="2298" xmlns="http://www.w3.org/2000/svg">
<title>Network 'Homo sapiens'</title>
<desc>Created with Omix</desc>
<defs>
<clipPath id="clipPath1">
<path d="M0,0 L2298.591,0 L2298.591,2541.682 L0,2541.682 L0,0"/>
</clipPath>
</defs>
<g clip-path="url(#clipPath1)" fill="none" fill-rule="evenodd" font-family="Helvetica" font-size="7.5px" font-style="normal" font-weight="400" id="ID3f9bfff0" stroke="#000000" stroke-linecap="square" stroke-linejoin="bevel" stroke-opacity="1" stroke-width="1">
<g class="Metabolite" id="Metabolite$NADH$3" name="NADH" omix:clone="3">
<g class="Shape" id="Shape_of_Metabolite$NADH$3">
<path d="M-30,-15 C-30,-17.761 -27.851,-20 -25.2,-20 L25.2,-20 C27.851,-20 30,-17.761 30,-15 L30,15 C30,17.761 27.851,20 25.2,20 L-25.2,20 C-27.851,20 -30,17.761 -30,15 L-30,-15" fill="#a28dff" fill-opacity="1" fill-rule="evenodd" id="ID3f089e5e" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" stroke-width="1" transform="matrix(1.0,0.0,0.0,1.0,1206.0929206118517,898.2429901388446)" vector-effect="none"/>
</g>
<g class="Label" id="Label_of_Metabolite$NADH$3">
<text fill="#000000" fill-opacity="1" font-family="Helvetica" font-size="18px" font-style="normal" font-weight="700" id="ID4037e797" stroke="none" transform="matrix(1.0,0.0,0.0,1.0,1173.6866706118517,883.2429901388446)" x="4.812" xml:space="preserve" y="22">NADH</text>
</g>
</g>
</g>
</svg>
CSS:
.metabolite_hover .Shape path {
fill: #ff0000 !important;
}
Я хочу изменить цвет пути при наведении курсора на объект SVG. Мой JS успешно изменяет класс объекта на .metabolite_hover, однако CSS не переопределяет заливку.