How can you point an SVG data URL from JS to an HTML Object element's data attribute?-CodePudding

I found a simple tutorial on kirupa.com that shows how to use JS to inject an external SVG into an empty img element in HTML.

<html>
<head>
<style>
.rocketContainer {
  background-color: #FFEB3B;
  width: 100px;
  height: 100px;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.rocketContainer img {
  width: 50px;
}

</style>

</head>

<body>
<div class="rocketContainer">
<img/>
</div>
<script>  
var imageElement = document.querySelector(".rocketContainer img");
imageElement.src = "https://www.kirupa.com/images/rocket.svg";
</script>
</body>
</html>

But I need to use an object element, not an img element since my SVGs are animated with JS by clicks. I've already converted my SVGs to Data URIs/URLs and am using those in the data attributes of object elements, but I reuse them each over sixty times on one page, and believe that injecting them into the HTML through JS would help with loading times and performance.

Here's a CodePen link w/ my unsuccessful stab at modifying the code above for use with objects instead of elements. If it worked, it would display an identical SVG in the box on the right. Core code copied below.

<html>
<body>

<!-- Test Object with Empty data -->   
<object class="likeButtonInject" type="image/svg xml" data="">
</object>

<script>  
var likeButtonObjectElement = document.querySelector(".likeButtonInject object data");
likeButtonObjectElement.data = "data:image/svg xml,'http://www.w3.org/2000/svg' viewBox='0 0 32.5 32.5' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cdefs%3E'eproXtLa4JU3-fill' cx='0' cy='0' r='95.5' spreadMethod='pad' gradientUnits='userSpaceOnUse' gradientTransform='translate(99.6 85.5)'%3E'eproXtLa4JU3-fill-0' offset='0%' stop-color='rgba(255,255,255,0)'/%3E'eproXtLa4JU3-fill-1' offset='100%' stop-color='rgba(255,255,255,0)'/%3E3E'eproXtLa4JU4-fill' cx='0' cy='0' r='176.8' spreadMethod='pad' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45.1 -53.2 162.8)'%3E'eproXtLa4JU4-fill-0' offset='0%' stop-color='rgba(255,255,255,0)'/%3E'eproXtLa4JU4-fill-1' offset='100%' stop-color='rgba(122,122,122,0)'/%3E3E'eproXtLa4JU3-filter' x='-400%' width='600%' y='-400%' height='600%'%3E'eproXtLa4JU3-filter-contrast-0' result='result'%3E'eproXtLa4JU3-filter-contrast-0-R' type='linear' slope='1.5' intercept='-.3'/%3E'eproXtLa4JU3-filter-contrast-0-G' type='linear' slope='1.5' intercept='-.3'/%3E'eproXtLa4JU3-filter-contrast-0-B' type='linear' slope='1.5' intercept='-.3'/%3E3E'eproXtLa4JU3-filter-blur-0' stdDeviation='0,0' result='result'/%3E'eproXtLa4JU3-filter-opacity-0' result='result'%3E'eproXtLa4JU3-filter-opacity-0-A' type='table' tableValues='0 0.29'/%3E3E'eproXtLa4JU3-filter-brightness-0' result='result'%3E'eproXtLa4JU3-filter-brightness-0-R' type='linear' slope='1'/%3E'eproXtLa4JU3-filter-brightness-0-G' type='linear' slope='1'/%3E'eproXtLa4JU3-filter-brightness-0-B' type='linear' slope='1'/%3E3E3E'eproXtLa4JU4-filter' x='-400%' width='600%' y='-400%' height='600%'%3E'eproXtLa4JU4-filter-contrast-0' result='result'%3E'eproXtLa4JU4-filter-contrast-0-R' type='linear' slope='1.5' intercept='-.3'/%3E'eproXtLa4JU4-filter-contrast-0-G' type='linear' slope='1.5' intercept='-.3'/%3E'eproXtLa4JU4-filter-contrast-0-B' type='linear' slope='1.5' intercept='-.3'/%3E3E'eproXtLa4JU4-filter-opacity-0' result='result'%3E'eproXtLa4JU4-filter-opacity-0-A' type='table' tableValues='0 1'/%3E3E3E3E'eproXtLa4JU2' transform='matrix(.13 0 0 .13 30.1 -.5)' stroke-width='12.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1'%3E'eproXtLa4JU3' style='mix-blend-mode:screen' d='M99.6 29.7c10.9-13.3 25.3-25.3 43-27.6a46.2 46.2 0 0 1 45.6 23 53 53 0 0 1 0 52.4c-15.2 25.5-38 45.2-59.5 65.3l-29 26.5m0-139.6C88.7 16.4 74.2 4.4 56.6 2.1a46.2 46.2 0 0 0-45.7 23 53 53 0 0 0 0 52.4c15.3 25.5 38 45.2 59.6 65.3l29 26.5' transform='translate(-206.3 43.2)' filter='url(#eproXtLa4JU3-filter)' fill='url(#eproXtLa4JU3-fill)' stroke='#FFF'/%3E'eproXtLa4JU4' d='M99.6 29.7c10.9-13.3 25.3-25.3 43-27.6a46.2 46.2 0 0 1 45.6 23 53 53 0 0 1 0 52.4c-15.2 25.5-38 45.2-59.5 65.3l-29 26.6m0-139.7C88.7 16.4 74.2 4.4 56.6 2.1a46.2 46.2 0 0 0-45.7 23 53 53 0 0 0 0 52.4c15.3 25.5 38 45.2 59.6 65.3l29 26.6' transform='translate(-206.3 43.2)' filter='url(#eproXtLa4JU4-filter)' fill='url(#eproXtLa4JU4-fill)' stroke='#FEFEFE'/%3E3E%3Cscript%3E5BCDATA[(function(s,i,u,o,w,d,t,n,x,e,p)%7Bw%5Bo]=w%5Bo%5D%7C%7C%7B};w%5Bo%5D%5Bs]=w%5Bo%5D%5Bs%5D%7C%7C%5B];w%5Bo%5D%5Bs].push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',[u,s,'.','j','s'].join(''));e.setAttributeNS(null,'src',[u,s,'.','j','s'].join(''));p=d.getElementsByTagName(t)[0];p.parentNode.insertBefore(e,p);})('91c80d77',{'root':'eproXtLa4JU1','animations':%5B{'elements':{'eproXtLa4JU3':{'opacity':%5B{'t':0,'v':1,'e':[0.645,0.045,0.355,1%5D},{'t':598.8023952095809,'v':1%7D],'#filter':{'keys':%5B{'t':0,'v':%5B{'type':'contrast','value':1.5},{'type':'blur','value':{'x':0,'y':0%7D},{'type':'opacity','value':0.29},{'type':'brightness','value':1%7D],'e':[0.645,0.045,0.355,1%5D},{'t':598.8023952095809,'v':%5B{'type':'contrast','value':1.5},{'type':'blur','value':{'x':18,'y':18%7D},{'type':'opacity','value':1.0129511443425883},{'type':'brightness','value':1.4%7D%5D%7D],'data':{'items':%5B['contrast','eproXtLa4JU3-filter-contrast-0'],['blur','eproXtLa4JU3-filter-blur-0'],['opacity','eproXtLa4JU3-filter-opacity-0'],['brightness','eproXtLa4JU3-filter-brightness-0'%5D%5D%7D},'fill':%5B{'t':0,'v':{'t':'g','v':%5B{'r':255,'g':255,'b':255,'a':0},{'r':255,'g':255,'b':255,'a':0%7D],'r':'eproXtLa4JU3-fill'%7D},{'t':598.8023952095809,'v':{'t':'g','v':%5B{'r':255,'g':255,'b':255,'a':1},{'r':211,'g':211,'b':211,'a':1%7D],'r':'eproXtLa4JU3-fill'%7D%7D%5D},'eproXtLa4JU4':{'fill':%5B{'t':0,'v':{'t':'g','v':%5B{'r':255,'g':255,'b':255,'a':0},{'r':122,'g':122,'b':122,'a':0%7D],'r':'eproXtLa4JU4-fill'%7D},{'t':598.8023952095809,'v':{'t':'g','v':%5B{'r':255,'g':255,'b':255,'a':0},{'r':255,'g':255,'b':255,'a':0.8%7D],'r':'eproXtLa4JU4-fill'%7D%7D%5D%7D},'s':'MDLA2M2NiNzJiNDGM1YzJiMWM0YUmI5SGJmYmVWKNzI4YTg1ODNk4ODdlODg4MPDgyODM4OTg1HVDgyODA4OTgS1ODg4MDg4N2GM3MmI0YjljMGmI1YjNjNGI5DYmZiZTcyOGEP4MTdjNzJiOWBM0YjVjMmIxTR2M0YjliZmJlLVWMzNzI4YTgFxN2M3MmI2YjJliY2JjNzI4YDTgxN2M3MmIxNYmNjNGI1YzJJiZUZiMVhjNGPI1NzI4YWI2YEjFiY2MzUGI1VN2M3MmMzYzBCKYjViNWI0SzGcySThhODFCNT2U4Njg3Y2Q/I'%7D],'options':'MDMAyMzhmMzY4NNzg4NzU4Njg4MMzY0ZTM2NzcK4MDdkNzc3ZjLM2NDAzNjc3OQDA3ZDc3N2YzNNjRlMzY4NjcE5OGE3OTg2ODJc3OTM2OTE/'},'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')%5D%5D%3E3E3E
";
</script>
</body>
</html>

The code above gives me a JS error reading Uncaught TypeError: Cannot set properties of null (setting 'data').

Is there a way to avoid this error, and are there any other glaring mistakes in my attempt linked above?

CodePudding user response：

Your CSS selector doesn't match your hierarchy in the second case.

In the first (working) case we have

.rocketContainer img

Here we need to find an object with a class name of .rocketContainer, then look for any descentants that are img tags. There's one of those so we find it.

In the second case we have

.likeButtonInject object data

So we again are looking for an element with a particular class name, but then we need to find all descendants that are object tags. There are none because the element with that class name has no children. Beyond that we'd be looking for data elements descendants of those nonexistent object tags but data is an attribute of the object tag, and not an element at all.

In this case just

.likeButtonInject

on its own will do.