如何将SVG数据URL从JS指向HTML对象元素的数据属性？
如何将SVG数据URL从JS指向HTML对象元素的数据属性？
提问于 2021-10-12 19:33:50
我在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元素，因为我的SVGs是按下JS动画的。我已经将我的SVG转换成数据URI/URL，并且正在使用对象元素的数据属性中的那些，但是我在一个页面上重复使用它们每一次超过60次，并且相信通过JS将它们注入到HTML中将有助于加载时间和性能。
这里有一个CodePen链接w/我失败的刺在修改上面的代码以用于对象而不是元素时。如果工作正常，它将在右边的框中显示一个相同的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,%3Csvg id='eproXtLa4JU1'
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32.5 32.5' shape-rendering='geometricPrecision' text-rendering='geometricPrecision'%3E%3Cdefs%3E%3CradialGradient id='eproXtLa4JU3-fill' cx='0' cy='0' r='95.5' spreadMethod='pad' gradientUnits='userSpaceOnUse' gradientTransform='translate(99.6 85.5)'%3E%3Cstop id='eproXtLa4JU3-fill-0' offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop id='eproXtLa4JU3-fill-1' offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/radialGradient%3E%3CradialGradient id='eproXtLa4JU4-fill' cx='0' cy='0' r='176.8' spreadMethod='pad' gradientUnits='userSpaceOnUse' gradientTransform='rotate(45.1 -53.2 162.8)'%3E%3Cstop id='eproXtLa4JU4-fill-0' offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop id='eproXtLa4JU4-fill-1' offset='100%25' stop-color='rgba(122,122,122,0)'/%3E%3C/radialGradient%3E%3Cfilter id='eproXtLa4JU3-filter' x='-400%25' width='600%25' y='-400%25' height='600%25'%3E%3CfeComponentTransfer id='eproXtLa4JU3-filter-contrast-0' result='result'%3E%3CfeFuncR id='eproXtLa4JU3-filter-contrast-0-R' type='linear' slope='1.5' intercept='-.3'/%3E%3CfeFuncG id='eproXtLa4JU3-filter-contrast-0-G' type='linear' slope='1.5' intercept='-.3'/%3E%3CfeFuncB id='eproXtLa4JU3-filter-contrast-0-B' type='linear' slope='1.5' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3CfeGaussianBlur id='eproXtLa4JU3-filter-blur-0' stdDeviation='0,0' result='result'/%3E%3CfeComponentTransfer id='eproXtLa4JU3-filter-opacity-0' result='result'%3E%3CfeFuncA id='eproXtLa4JU3-filter-opacity-0-A' type='table' tableValues='0 0.29'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer id='eproXtLa4JU3-filter-brightness-0' result='result'%3E%3CfeFuncR id='eproXtLa4JU3-filter-brightness-0-R' type='linear' slope='1'/%3E%3CfeFuncG id='eproXtLa4JU3-filter-brightness-0-G' type='linear' slope='1'/%3E%3CfeFuncB id='eproXtLa4JU3-filter-brightness-0-B' type='linear' slope='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cfilter id='eproXtLa4JU4-filter' x='-400%25' width='600%25' y='-400%25' height='600%25'%3E%3CfeComponentTransfer id='eproXtLa4JU4-filter-contrast-0' result='result'%3E%3CfeFuncR id='eproXtLa4JU4-filter-contrast-0-R' type='linear' slope='1.5' intercept='-.3'/%3E%3CfeFuncG id='eproXtLa4JU4-filter-contrast-0-G' type='linear' slope='1.5' intercept='-.3'/%3E%3CfeFuncB id='eproXtLa4JU4-filter-contrast-0-B' type='linear' slope='1.5' intercept='-.3'/%3E%3C/feComponentTransfer%3E%3CfeComponentTransfer id='eproXtLa4JU4-filter-opacity-0' result='result'%3E%3CfeFuncA id='eproXtLa4JU4-filter-opacity-0-A' type='table' tableValues='0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3C/defs%3E%3Cg id='eproXtLa4JU2' transform='matrix(.13 0 0 .13 30.1 -.5)' stroke-width='12.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='1'%3E%3Cpath id='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(%23eproXtLa4JU3-filter)' fill='url(%23eproXtLa4JU3-fill)' stroke='%23FFF'/%3E%3Cpath id='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(%23eproXtLa4JU4-filter)' fill='url(%23eproXtLa4JU4-fill)' stroke='%23FEFEFE'/%3E%3C/g%3E%3Cscript%3E%3C!%5BCDATA%5B(function(s,i,u,o,w,d,t,n,x,e,p)%7Bw%5Bo%5D=w%5Bo%5D%7C%7C%7B%7D;w%5Bo%5D%5Bs%5D=w%5Bo%5D%5Bs%5D%7C%7C%5B%5D;w%5Bo%5D%5Bs%5D.push(i);e=d.createElementNS(n,t);e.async=true;e.setAttributeNS(x,'href',%5Bu,s,'.','j','s'%5D.join(''));e.setAttributeNS(null,'src',%5Bu,s,'.','j','s'%5D.join(''));p=d.getElementsByTagName(t)%5B0%5D;p.parentNode.insertBefore(e,p);%7D)('91c80d77',%7B'root':'eproXtLa4JU1','animations':%5B%7B'elements':%7B'eproXtLa4JU3':%7B'opacity':%5B%7B't':0,'v':1,'e':%5B0.645,0.045,0.355,1%5D%7D,%7B't':598.8023952095809,'v':1%7D%5D,'%23filter':%7B'keys':%5B%7B't':0,'v':%5B%7B'type':'contrast','value':1.5%7D,%7B'type':'blur','value':%7B'x':0,'y':0%7D%7D,%7B'type':'opacity','value':0.29%7D,%7B'type':'brightness','value':1%7D%5D,'e':%5B0.645,0.045,0.355,1%5D%7D,%7B't':598.8023952095809,'v':%5B%7B'type':'contrast','value':1.5%7D,%7B'type':'blur','value':%7B'x':18,'y':18%7D%7D,%7B'type':'opacity','value':1.0129511443425883%7D,%7B'type':'brightness','value':1.4%7D%5D%7D%5D,'data':%7B'items':%5B%5B'contrast','eproXtLa4JU3-filter-contrast-0'%5D,%5B'blur','eproXtLa4JU3-filter-blur-0'%5D,%5B'opacity','eproXtLa4JU3-filter-opacity-0'%5D,%5B'brightness','eproXtLa4JU3-filter-brightness-0'%5D%5D%7D%7D,'fill':%5B%7B't':0,'v':%7B't':'g','v':%5B%7B'r':255,'g':255,'b':255,'a':0%7D,%7B'r':255,'g':255,'b':255,'a':0%7D%5D,'r':'eproXtLa4JU3-fill'%7D%7D,%7B't':598.8023952095809,'v':%7B't':'g','v':%5B%7B'r':255,'g':255,'b':255,'a':1%7D,%7B'r':211,'g':211,'b':211,'a':1%7D%5D,'r':'eproXtLa4JU3-fill'%7D%7D%5D%7D,'eproXtLa4JU4':%7B'fill':%5B%7B't':0,'v':%7B't':'g','v':%5B%7B'r':255,'g':255,'b':255,'a':0%7D,%7B'r':122,'g':122,'b':122,'a':0%7D%5D,'r':'eproXtLa4JU4-fill'%7D%7D,%7B't':598.8023952095809,'v':%7B't':'g','v':%5B%7B'r':255,'g':255,'b':255,'a':0%7D,%7B'r':255,'g':255,'b':255,'a':0.8%7D%5D,'r':'eproXtLa4JU4-fill'%7D%7D%5D%7D%7D,'s':'MDLA2M2NiNzJiNDGM1YzJiMWM0YUmI5SGJmYmVWKNzI4YTg1ODNk4ODdlODg4MPDgyODM4OTg1HVDgyODA4OTgS1ODg4MDg4N2GM3MmI0YjljMGmI1YjNjNGI5DYmZiZTcyOGEP4MTdjNzJiOWBM0YjVjMmIxTR2M0YjliZmJlLVWMzNzI4YTgFxN2M3MmI2YjJliY2JjNzI4YDTgxN2M3MmIxNYmNjNGI1YzJJiZUZiMVhjNGPI1NzI4YWI2YEjFiY2MzUGI1VN2M3MmMzYzBCKYjViNWI0SzGcySThhODFCNT2U4Njg3Y2Q/I'%7D%5D,'options':'MDMAyMzhmMzY4NNzg4NzU4Njg4MMzY0ZTM2NzcK4MDdkNzc3ZjLM2NDAzNjc3OQDA3ZDc3N2YzNNjRlMzY4NjcE5OGE3OTg2ODJc3OTM2OTE/'%7D,'https://cdn.svgator.com/ply/','__SVGATOR_PLAYER__',window,document,'script','http://www.w3.org/2000/svg','http://www.w3.org/1999/xlink')%5D%5D%3E%3C/script%3E%3C/svg%3E%0A";
*/
</script>
</body>
</html>--上面的代码给了我一个JS错误，读取了Uncaught :无法设置null属性(设置'data')。
有没有办法避免这个错误，在我的尝试中还有其他明显的错误吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-12 20:48:24
在第二种情况下，CSS选择器与您的层次结构不匹配。
在第一种情况下，我们有
.rocketContainer img在这里，我们需要找到一个类名为.rocketContainer的对象，然后查找任何属于img标记的下降点。有一个，所以我们找到了。
在第二种情况下
.likeButtonInject object data因此，我们再次寻找一个具有特定类名的元素，但是我们需要找到所有的子代，它们都是对象标记。没有，因为具有该类名的元素没有子元素。除此之外，我们将寻找那些不存在的对象标记的数据元素的后代，但是数据是对象标记的属性，而不是元素。
在这种情况下
.likeButtonInject靠它自己就行了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69546080
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号