Modifying SVG Colors with JavaScript Not Working in AnkiDroid

[Paul Wintz]

I am creating a deck for learning countries based on their shape and location on a map. The front of each card shows a map with one country highlighted in red, and the back shows the same map with the name of the country beneath. 

To avoid creating and storing a separate image file for each map, I use one SVG file for each world region, with each country labeled by an ID in the XML. I then reference the ID from a script to modify the color properties. The script works on Anki Desktop, but in AnkiDroid, the color change does not work. 

I have attached an example deck, and the script is included below. I would appreciate any advice about how to modify SVG properties in a way that is compatible with AnkiDroid.

Front Template

<object id="svg_map_id" data="{{svg_file_name}}.svg" type="image/svg+xml"></object>
<script>
    // fetches the document for the given embedding_element
    function getSubDocument(embedding_element){
        console.log('embedding_element:')
        console.log(embedding_element)
        var subdoc = embedding_element.contentDocument;
        if (subdoc){
            console.log('subdoc:')
            console.log(subdoc)
            return subdoc;
        } else {
            subdoc = embedding_element.getSVGDocument();
            console.log('subdoc:')
            console.log(subdoc)
            return subdoc;
        }
    }
               
    function changeFillColorOfCountry(){
        console.log('Changing fill color of {{country_id}}')
        var svg_map = document.getElementById('svg_map_id');
        var subdoc = getSubDocument(svg_map)
        if (subdoc) {
            subdoc.getElementById("{{country_id}}").style.fill='red';
        } else {
            console.log('Error: SVG document with id "svg_map_id" not loaded. Cannot highlight selected country.')
            console.log(subdoc)
        }
    }

    var obj = document.getElementById('svg_map_id');
    obj.onload = function (no_error) {
        changeFillColorOfCountry();
      //obj.contentDocument.getElementById("{{country_id}}").style.fill='red';
    }
</script>