Is there a way to retrieve an SVG element embedded within a CSS `background` using JavaScript?

Question

Is there a way to retrieve an SVG element embedded within a CSS `background` using JavaScript?

Here is some sample HTML and CSS that includes an SVG as a background:

<div class="box"></div>

.box {
  width: 300px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}

I am attempting to use JavaScript to target the element with #rect like this:

// Ensure the SVG has loaded.
window.onload = function() {
  // ...however, this still returns null
  console.log(document.getElementById("rect"));
}

Despite my efforts, the console displays null. Is there a different method to reference this <rect> using JavaScript?

javascript html css svg

Answer 1

Answer №1

When your SVG document is loaded as a CSS <image> (such as through properties like background-image or content), it exists in an external environment where scripts cannot access it, similar to how it functions when loaded as an HTML <img>.

In essence, you can essentially disregard the fact that there is an SVG Document loaded here.

If you wish to make changes to the image, you will need to directly edit the URL:

const box = document.querySelector(".box");
// rule is a string
const rule = getComputedStyle(box).backgroundImage;
box.style.backgroundImage = rule.replace("red", "blue");

.box {
  width: 300px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}

<div class="box"></div>

Answer 2

When your SVG document is loaded as a CSS <image> (such as through properties like background-image or content), it exists in an external environment where scripts cannot access it, similar to how it functions when loaded as an HTML <img>.

In essence, you can essentially disregard the fact that there is an SVG Document loaded here.

If you wish to make changes to the image, you will need to directly edit the URL:

const box = document.querySelector(".box");
// rule is a string
const rule = getComputedStyle(box).backgroundImage;
box.style.backgroundImage = rule.replace("red", "blue");

.box {
  width: 300px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect id="rect" width="100" height="100" fill="red"><animate attributeName="x" from="0" to="400" dur="6s" repeatCount="indefinite"/></rect></svg>');
}

<div class="box"></div>

Is there a way to retrieve an SVG element embedded within a CSS `background` using JavaScript?

Answer №1

Similar questions

Tips for transitioning from custom CSS to Material UI's CSS in JS

There is a syntax error that occurs when attempting to begin a key with a hyphen (-)

Strange occurrence with getBoundingClientRect() function and F5 refresh, what could be causing this odd behavior?

Tips for utilizing console log within a react form component

What is the method for transferring the chosen value from a select element into a textarea?

Error: Cannot read property 'X' of undefined in JavaScript when using Django framework

Even with the use of Display Flex, the menu and text remain misaligned

CSS auto width not applied to images causing a lack of scaling

Discover the most concise string within the array

React Native tutorial: Changing button color on press

Address properties that are undefined before they cause an error

The Python error message, "JSONDecodeError: Expecting value: line 1 column 1 (char 0)," indicates that there

Changing the state within a slice by utilizing an object as the payload

Issue with React component not reflecting updated state following Axios call

What is the best way to utilize useRef on a component that is not accessible within React BigCalendar?

What is the best way to use canvas to precisely draw a line on the display at specific absolute coordinates?

Retrieve the Smallest Value from an Array of Objects in a JSON document

The Datetimepicker component outputs the date in datetime format rather than a timestamp

Angular 2 encountering troublesome JSON response with invalid characters

What is the best way to show the associated ul tag?