如何將JS中的SVG資料URL指向HTML物件元素的資料屬性？-有解無憂

我在 kirupa.com 上找到了一個簡單的教程，它展示了如何使用 JS 將外部 SVG 注入到HTML 中的空 img 元素中。

<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>

但是我需要使用物件元素，而不是 img 元素，因為我的 SVG 是通過點擊使用 JS 影片的。我已經將我的 SVG 轉換為資料 URI/URL 并在物件元素的資料屬性中使用它們，但我在一個頁面上重復使用它們超過 60 次，并相信通過 JS 將它們注入 HTML 將有助于加載時間和性能。

這是一個 CodePen 鏈接，我在修改上面的代碼以用于物件而不是元素時失敗了。如果它有效，它將在右側的框中顯示相同的 SVG。下面復制了核心代碼。

<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>

上面的代碼給了我一個 JS 錯誤，讀取Uncaught TypeError: Cannot set properties of null (setting 'data')。

有沒有辦法避免這個錯誤，在我上面鏈接的嘗試中還有其他明顯的錯誤嗎？

uj5u.com熱心網友回復：

在第二種情況下，您的 CSS 選擇器與您的層次結構不匹配。

在第一個（作業）情況下，我們有

.rocketContainer img

這里我們需要找到一個類名為 .rocketContainer 的物件，然后尋找任何帶有 img 標簽的后代。其中有一個，所以我們找到了。

在第二種情況下，我們有

.likeButtonInject object data

所以我們再次尋找具有特定類名的元素，但隨后我們需要找到所有作為物件標簽的后代。沒有，因為具有該類名的元素沒有子元素。除此之外，我們將尋找那些不存在的物件標簽的資料元素后代，但資料是物件標簽的一個屬性，而不是一個元素。

在這種情況下只是

.likeButtonInject

自己會做的。

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312317.html

標籤：javascript html svg

上一篇：將SVG匯入HTML

下一篇：我可以不僅在路徑上添加懸停在整個svg上嗎