In my web app, I utilize SVG files to visually map different types of data onto our experimental dataset. Each SVG file corresponds to a specific type of data and is displayed individually on most pages of the site. These maps include tooltips on nodes for additional information and links to related data.
Now, I want to create a page where multiple maps can be compared side by side. This requires embedding several self-contained SVGs on the same page. However, when I attempt this, there's an issue with the text in the labels and axes. The subsequent SVGs seem to adopt the formatting from the first image, resulting in muddled and nonsensical labels and axes.
The code snippet below illustrates how the SVGs are currently embedded on the page. The SVG content is loaded into object blocks via JavaScript/AJAX when the user selects a map from a dropdown menu. Everything works fine except for the text display problem with the SVGs.
<object id="map" name="map" class="compBuild" width=800 height=460></object>
Javascript:
$(document).on("change", ".db_field", function(e) {
var tmp = this.name.split("_");
var field = "map_" + tmp[1];
$(document.getElementById(field)).load(getSvgUrl($(this).val()));
// getSvgUrl function makes a JQuery AJAX call to get the SVG file location.
})
Although not explicitly mentioned in the provided code, the menus and object blocks are dynamically generated on the page. Hence, the drop-downs and object blocks are referenced as mapSelect_X and map_X, where X is a number added during block creation (actual code not included due to brevity).
I am seeking a solution to this issue as I prefer not to convert the SVG files to images, as it would result in losing functionality within the SVGs. Any assistance is highly appreciated. Thank you!