如何使用新文件的内容更改网页上的svg元素?

Question

我使用SVGInject来加载svg-images inline:

<img src="image1.svg" id="changeme" onload="SVGInject(this)" />

这就像一个魅力，图像可以移动，旋转等。
但是以后有可能"改变"吗?也许是图像?

. getelementbyid("changeme")。
SVGInject(document.getElementById('changeme'));

这行不通。对象应该重新加载吗?或者原来的被销毁，新的被创建…

欢呼

Answer 1

替换svg不起作用，因为svg-inject.js删除了原始的img元素。因此，document.getElementById('changeme')不能选择或替换任何东西。

您可以将原始SVGInject(el)函数包装在一个辅助函数中，该函数在内联svg之前克隆img元素。
这样你就可以替换img src，删除之前内联的svg，最后重新注入修改后的svg url。

/// find and replace all svgs with class name "svg-replace"
var svgInjects = document.querySelectorAll('.svg-replace');
if(svgInjects.length){
for(var i=0; i<svgInjects.length; i++){
var svgEl = svgInjects[i];
// modified inject function
SVGInjectCloned(svgEl); 
}
}


function SVGInjectCloned(svgEl){
var svgCloned = svgEl.cloneNode(true);
svgEl.parentNode.appendChild(svgCloned);

/// hide original 
svgEl.setAttribute('style', 'display:none');
// inline svg
SVGInject(svgCloned);
//console.log('svg inlined');
}

function replaceSvg(previousSvgEl, newSvgUrl){
var svgEl = document.querySelector(previousSvgEl);
// find and delete previously inlined svg
var inlinedSvg = svgEl.nextElementSibling;
if(inlinedSvg){
inlinedSvg.remove();
/// make original visible again
svgEl.removeAttribute('style');
// update svg src
svgEl.src = newSvgUrl;
// reclone svg element for inlining
var svgCloned = svgEl.cloneNode(true);
svgEl.parentNode.appendChild(svgCloned);
/// hide original 
svgEl.setAttribute('style', 'display:none');
SVGInject(svgCloned);
}   
}


// example button
var newSvgUrl =
"data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='user-friends' class='svg-inline--fa fa-user-friends fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M192 256c61.9 0 112-50.1 112-112S253.9 32 192 32 80 82.1 80 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C51.6 288 0 339.6 0 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zM480 256c53 0 96-43 96-96s-43-96-96-96-96 43-96 96 43 96 96 96zm48 32h-3.8c-13.9 4.8-28.6 8-44.2 8s-30.3-3.2-44.2-8H432c-20.4 0-39.2 5.9-55.7 15.4 24.4 26.3 39.7 61.2 39.7 99.8v38.4c0 2.2-.5 4.3-.6 6.4H592c26.5 0 48-21.5 48-48 0-61.9-50.1-112-112-112z'%3E%3C/path%3E%3C/svg%3E";
var btnSvgReplace = document.querySelector('.btnSvgReplace');
if(btnSvgReplace){
btnSvgReplace.addEventListener('click', function(){
replaceSvg('#firstSvg', 
newSvgUrl
);
});
}

img,
svg
{
width:100px;
height:100px; 
}

<script src="https://cdn.jsdelivr.net/npm/@iconfu/svg-inject@1.2.3/dist/svg-inject.min.js"></script>
<div class="svg-wrp">
<img src="data:image/svg+xml,%0A%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='users' class='svg-inline--fa fa-users fa-w-20' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath fill='currentColor' d='M96 224c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm448 0c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64zm32 32h-64c-17.6 0-33.5 7.1-45.1 18.6 40.3 22.1 68.9 62 75.1 109.4h66c17.7 0 32-14.3 32-32v-32c0-35.3-28.7-64-64-64zm-256 0c61.9 0 112-50.1 112-112S381.9 32 320 32 208 82.1 208 144s50.1 112 112 112zm76.8 32h-8.3c-20.8 10-43.9 16-68.5 16s-47.6-6-68.5-16h-8.3C179.6 288 128 339.6 128 403.2V432c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-28.8c0-63.6-51.6-115.2-115.2-115.2zm-223.7-13.4C161.5 263.1 145.6 256 128 256H64c-35.3 0-64 28.7-64 64v32c0 17.7 14.3 32 32 32h65.9c6.3-47.4 34.9-87.3 75.2-109.4z'%3E%3C/path%3E%3C/svg%3E" class="svg-replace" id="firstSvg" />
</div>  
<p><button class="btnSvgReplace">Replace svg</button></p>