我使用 SVGInject 行內加載 svg-images：
<img src="image1.svg" id="changeme" onl oad="SVGInject(this)" />
這就像一個魅力，影像可以移動，旋轉等。
但是以后有可能“改變”影像嗎？
document.getElementById('changeme').src = 'image2.svg';
SVGInject(document.getElementById('changeme'));
這不起作用。應該重新加載物件嗎？或者原來的被毀了，一個新的……
干杯
uj5u.com熱心網友回復：
替換 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,";
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/[email protected]/dist/svg-inject.min.js"></script>
<div class="svg-wrp">
<img src="data:image/svg xml,
" class="svg-replace" id="firstSvg" />
</div>
<p><button class="btnSvgReplace">Replace svg</button></p>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/345464.html
標籤：javascript html svg