如何使用新文件中的内容更改网页上的 SVG 元素？

Question

我使用 SVGInject 内联加载 svg-images：

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

这就像一个魅力，图像可以移动、旋转等。
但是以后有可能“改变”图像吗？

document.getElementById('changeme').src = 'image2.svg';
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>