Issues with loading images in safari using xlink:href in SVG files

For the #patternImage image tag, I have successfully loaded a base64encoded image into the 'xlink:href' attribute. This setup is functioning properly in both Chrome and Firefox, however, it is not working in Safari.

Here is the HTML code:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;" >
    <defs>
        <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <image id="patternImage" xlink:href="" width="20" height="20"></image>
        </pattern>
    </defs>
    <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern) !important"></path>
</svg>

This is the corresponding JavaScript code:

$("#patternImage").attr("xlink:href", encodedImage);
$("#patternImage").load(function(){
    console.log("Loaded");
});
javascriptsvgxlink

Answer №1

Appreciations Kaiido

Here is the Solution :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id='svgId' width="576" height="720" style="outline:auto;">
        <defs>
            <pattern id="imgpattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <image id="patternImage" xlink:href="" width="20" height="20"></image>
            </pattern>
        </defs>
        <path id="svgpath" stroke="#f000" fill="#ff0000" stroke-width="0.25px" style="fill:url(#imgpattern)" d="M0,0H576V720H0z"></path>
</svg>

Javascript Code :

fetch("https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg").then(r => r.blob())
  .then(b => new Promise(res => {
    const f = new FileReader();
    f.onload = e => res(f.result);
    f.readAsDataURL(b);
  }))
  .then(encodedImage => {
    $("#patternImage").attr("xlink:href", encodedImage);
    $("#patternImage").load(function() {
    });
  });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on utilizing the .change method in order to deactivate a

Can someone help me with a quick solution for this issue? I need to know how to disable a select option once the value has been changed. The option should be available on initial load, but after the user selects it for the first time, it should be disable ...

javascripthtml

Creating a dynamic 3D pie chart with Highcharts and JSON data

I am attempting to create a 3D pie chart using HighChart with JSON data. Despite enabling the 3D option, it only displays in 2D. Here is an example of the 3D pie chart I am trying to achieve: https://www.highcharts.com/demo/3d-pie Could someone please he ...

javascriptjqueryhighcharts

When using jQuery's ajax() function, it is possible to pass HTML as data and change the ampersands in URLs to &amp;

I have encountered an issue where I am capturing the HTML content of a page and attempting to send it as a string to a PHP web service using jQuery's ajax() function. However, when I receive the parameter on the PHP side, the &s in the URLs present wi ...

javascriptphpjqueryajax

Design a div in the shape of a trapezium with clipped overflow

Is there a way to create a trapezium using CSS/Html/Canvas? I have attempted to do so, but my current method is messy and not practical. div { width:0; margin-left:-1000px; height:100px; border-right:1000px solid lightblue; border-top:60px solid tra ...

javascriptjqueryhtmlcss

Can inter-portlet communication be achieved using AJAX?

Is it possible to use an AJAX call in Portlet A to dynamically update Portlet B without refreshing the entire portal page? I am aware that portlets can refresh their content using the JSR286 resourceURL tag, but I am curious about targeting and updating a ...

javascriptajaxportletportal

${IDHERE} element's text color not changing when tab is switched

One dilemma I encountered involves displaying a percentage on a webpage with 2 tabs. The percentage is originally shown on the tab that is open when the page loads. The JavaScript code I used is quite straightforward: adaPercentColor(percent, ada) { ...

javascripthtmlcssangular

What is the significance of the ngf prefix within the context of AngularJS and ng-file-upload?

I recently discovered the ngf-select directive within ng-file-upload for AngularJS. Here's how it's used: <button type="file" ngf-select="uploadFiles($file, $invalidFiles)" accept="image/*" ngf-max-height="1000" ngf-max-size="1MB"> ...

javascriptangularjsangularjs-directiveng-file-upload

Dynamic addition of modules to my Angular application is a must

Is there a way to dynamically load modules in my Angular application based on user selection after they have logged in? ...

javascriptangularjsangularjs-module

keep information separate from a react component and generate state based on it

Is it considered acceptable to store data outside of a react component and update it from within the component in order to derive state? This method could be useful for managing complex deep-nested states. import React from "react"; let globalSt ...

javascriptreactjsreact-hooksreact-state

How to change the date value in an HTML input field of type date using JavaScript

Struggling with manipulating an HTML date input type using javascript? You're not alone. The common approach to manipulating the date is like this: var c = new Date(); c.setDate(c.getDate() + 1); You can get the date from the input element: c = do ...

javascripthtmldatedom

Issues encountered when rendering textures from a canvas in Three.js

I've been working on creating a texture from a canvas. I managed to successfully render a blank canvas, but encountered issues when trying to draw an image on the canvas and then render it. This is the code snippet I am currently using: var canva ...

javascriptcanvasthree.jstextures

Using JavaScript and jQuery, apply a class when a specific radio button is checked and the data attribute meets certain criteria

Need help with changing explanation color based on correct answer selection in multiple choice question. Currently, all choices turn green instead of just the selected correct one. Any assistance is welcome, thank you. html <li class='test-questi ...

javascriptjqueryradio-button

Display a login/logout button on the navbar of an AngularJS app page based on certain conditions

Welcome.jsp <html> <body ng-app="myApp"> <div class="menu"> <a href="/home"> Home </a> <a href="/orders" ng-show="$scope.isUserLoggedIn"> View Orders </label> <a href="/logout" ng-show="$scope.isUserL ...

javascriptangularjs

Updating the MLM binary tree system

In my JavaScript nested object, the IDs of objects increase in depth. By using JavaScript support, I added an object inside ID - 2 with a children array of 3. What I need is to update (increment) the IDs of all siblings in the tree. This code snippet shoul ...

javascriptarraysobject

Encountering an error when trying to change the input form which reads "Cannot read property of '1' undefined"

I am currently learning how to use React and I encountered an issue with changing the state of a form based on user input. To better explain my problem, I have provided a demo here. The error message Cannot read property '1' of undefined is being ...

javascriptreactjs

express includes a 500 error due to the .html extension for the view engine

I have an express app where I've configured my views to use HTML, but behind the scenes, I'm actually utilizing the ejs engine in order to maintain the .html extension. Here is how it's currently set up: app.set('views', path.join ...

javascriptnode.jsexpressejs

Retrieving form data from within the resource error callback scope

For my client-side validation on submit, I am calling a resource if the form is valid. On success, everything works fine. However, when encountering an error handler, I also perform server-side validation on my data transfer object bean which contains Hibe ...

javascriptjqueryjsonangularjs

Remove a particular row from a database table

I'm facing an issue with my code. I want to be able to remove a row by clicking on a remove button within that row, but I'm unsure of how to accomplish this. <tbody id="myTable"> <?php if (!isset($_SESSION)){ ...

javascriptphphtml-table

Utilizing Jquery selectors for elements that change dynamically

While this question may be common, I have yet to find a satisfactory answer that meets my needs. On one of the pages on my website, labeled A, there is a script being loaded: jQuery.getScript('js/jquery.tablesorter.min.js', function (data, statu ...

javascriptjqueryajaxdynamic

"Use MongoDB to perform an update operation that finds a document, replaces it

Require to update object values (not an array) Seeking to substitute current mongodb object with javascript object. A sample mongodb document looks like this: food: true toys: false bedding: false books: false tools: false Manually typing ...

javascriptreactjsmongodbmongoose