SVG z identyfikatorami poszczególnych elementów

Przepraszam, lekkomyślnie usunąłem wątek, bo wydawało mi się że znalazłem rozwiązanie. Jednak nie działa.

Mam dokument svg. Załączam go do html jako img. Ma on id="kb123". Sam SVG ma nadane id. Jeden z rectów ma id="kbmp-m" (rect klawisza M)

Chcę zmodyfikować jego styl. Jak to zrobić?

<img src="kb.svg" id="kb123" class="img-fluid">

   <rect id="kbmp-m" height="40" width="40" y="220.69" x="378.53"/> <!-- M -->

function colorOneKey() {
    document.getElementById("kb123").getSVGDocument().getElementById("kbmp-m").setAttribute("fill", "red");
}

Sposób powyżej nie działa. Jak to naprawić?

Dzięki
M.

Tutaj
https://stackoverflow.com/questions/36778305/javascript-not-working-in-embed-svg-file
piszą, że w Chromie to nie będzie działać na plikach lokalnych.

Sięgasz z jednego dokumentu, do drugiego, więc pewnie działają tu podobne mechanizmy CORS, jak przy manipulowaniu obcym dokumentem w iframe. Czyli protokół i domena otwartego dokumentu, oraz dokumentu w scr powinny się zgadzać.

Rozbij sobie to zapytanie:
getElementById("kb123").getSVGDocument().getElementById("kbmp-m")
Na trzy części i zobacz, w którym miejscu, jakie błędy wyskoczą w konsoli przeglądarki.
A później googlaj za tymi błędami.