如何用js把<svg>标签改成<img>标签？

Question

我正在编写一个 chrome 扩展来为朋友更改某个网站的徽标。问题是徽标是 <svg> 标签。如何更改js中的HTML标签和内容？

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功能

如何用js把<svg>标签改成<img>标签？

How Do I Change an <svg> Tag To An <img> Tag with js?

html

javascript

svg

image

google-chrome-extension