Как изменить <svg> Тег To <img> Тег с js?

Question

Я пишу расширение хром для изменения логотипа определенного сайта для друга. Проблема в том, что логотип является тегом <svg>. Как изменить HTML-тег и содержимое в js?

Answer 1

Не уверен, что вам разрешено использовать jQuery, но вы можете использовать replaceWith();

$(document).ready(function(e) { 
 
    $('svg').replaceWith('<img src="http://images.all-free-download.com/images/graphiclarge/smiley_10_55841.jpg" alt="smiley!"/>'); 
 
});

svg { 
 
    width: 200px; 
 
    height:200px; 
 
} 
 

 
img { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> 
 
    <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
 
    <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
 
    <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text> 
 
</svg> 
 
</div>

Если вы можете использовать только JavaScript, есть replaceChild функция.