WAS/ui/js/imgReplacement.js

//https://stackoverflow.com/questions/35000435/how-can-i-put-all-the-url-parameters-in-array-of-objects-using-jquery/35000946
function getParams(url) {
  var queryString = url.substring(url.indexOf('?') + 1);
  var paramsArr = queryString.split('&');
  var params = [];
  for (var i = 0, len = paramsArr.length; i < len; i++) {
    var keyValuePair = paramsArr[i].split('=');
    params.push({
      name: keyValuePair[0],
      value: keyValuePair[1]
    });
  }
  return params;
}


$(function() {
  $('#urls').on("submit",function(e) {
    e.preventDefault(); // cancel the actual submit
    loadImage($('#url').val(), $('#replacement').val())
  });
});


function loadImage(url, replacement){
  
  //https://centurio.work/customers/evva/was/server/8/23/images/0/de-at/
  //https://centurio.work/customers/evva/was/server/8/23/replacement
  
  
  //https://stackoverflow.com/questions/27775579/how-to-fill-d3-svg-with-image-instead-of-colour-with-fill
  
  
  //Embedd image so svg is accessible
  //https://stackoverflow.com/questions/12975929/how-to-use-svg-file-for-image-source-in-d3
  d3.svg(url).then(function(xml) {
    d3.select("#svgEmbed").node().appendChild(xml.documentElement);
    
    var dict =  {};
    
    //get All Text and if Available Rect before
    d3.select("#svgEmbed").selectAll("text").each(function(d,i){
      dict[d3.select(this).text()] = d3.select(this.previousSibling).node().getBBox()
    });
    
    var urlparameters = getParams(window.location.search)
    
    //replace text within image
    for (const [key, value] of urlparameters.entries()) {
      
      d3.select("#svgEmbed").selectAll("text").each(function(d,i){
        if(d3.select(this).text() == value.name){
          d3.select(this).text(value.value);
        }
      });
    }
    //load image Replacements
    $.ajax({
      type: "GET",
      url: replacement,
      dataType: "xml",
      success: function(xml) {
        $(xml).find('item').each(function(index){
          var extension = $(this).find('url').text().split('.').pop();
          if(extension == "mp4"){
            //https://stackoverflow.com/questions/38437834/append-foreignobject-containing-some-html-inside-an-svg-element
            var video = d3.select("#svgEmbed").append("foreignObject")
            video
            .attr("x", dict[$(this).find('abbreviation').text()].x)
            .attr("y", dict[$(this).find('abbreviation').text()].y)
            .attr("width", dict[$(this).find('abbreviation').text()].width)
            .attr("height", dict[$(this).find('abbreviation').text()].height)
            .append("xhtml:video")
            .attr("width", dict[$(this).find('abbreviation').text()].width)
            .attr("height", dict[$(this).find('abbreviation').text()].height)
            .attr("controls", "")
            .append("xhtml:source")
            .attr("type", "video/mp4")
            .attr("src", $(this).find('url').text());
          }
          else{
            d3.select("#svgEmbed").append("svg:image")
            .attr('x', dict[$(this).find('abbreviation').text()].x)
            .attr('y', dict[$(this).find('abbreviation').text()].y)
            .attr('width', dict[$(this).find('abbreviation').text()].width)
            .attr('height', dict[$(this).find('abbreviation').text()].height)
            .attr("xlink:href", $(this).find('url').text())
          }
        });
      }
    });
  });
  
  
}