如何使用js将<svg>标签更改为<img>标签?

库克鲁斯

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

八月

不知道是否允许使用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功能。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在img标签中更改svg源的颜色?

来自分类Dev

如何将图像标签更改为SVG中的另一个标签?

来自分类Dev

如何将img放在svg标签前面

来自分类Dev

在img标签中定位SVG?

来自分类Dev

将CSS应用于嵌入img标签的SVG图像

来自分类Dev

我可以阻止浏览器将 <image> 标签更改为 <img /> 吗?

来自分类Dev

SVG不显示在Safari的img标签中

来自分类Dev

载入img标签的svg为空白

来自分类Dev

如何将RepositoryItem更改为标签

来自分类Dev

将p标签更改为输入

来自分类Dev

将段落属性更改为输入标签

来自分类Dev

将标签更改为datagridview列的总和

来自分类Dev

将ggbio轨道标签更改为水平

来自分类Dev

将p标签更改为输入

来自分类Dev

将标签从数字更改为数字

来自分类Dev

将段落属性更改为输入标签

来自分类Dev

如何更改gnuplot生成的svg标签?

来自分类Dev

如何更改gnuplot生成的svg标签?

来自分类Dev

使用javascript更改svg标签的height属性

来自分类Dev

将Canvas插入img标签

来自分类Dev

svg动画标签更改

来自分类Dev

如何获得<img>标签的焦点

来自分类Dev

如何覆盖css的img标签

来自分类Dev

使用img标签中的数据

来自分类Dev

使用<img>标签嵌入时,SVG填充过渡不起作用

来自分类Dev

如何将<a> <img> </a>标签与div对齐

来自分类Dev

如何将img标签垂直放置在图片标签内?

来自分类Dev

SVG数据URI不在img标签中呈现

来自分类Dev

viewBox 属性是否通过 IMG 标签对包含的 SVG 起作用?