将图像更改为内联SVG>>拥有所有SVG功能

change image to inline SVG >> to have all SVG features

本文关键字：gt SVG 拥有 功能 图像      更新时间：2023-09-26

我有SVG图像，我想将它们的文件导出为img，然后将它们改回SVG。。更改的原因是我想更改SVG图像中所有矩形的颜色。

我使用了如何使用CSS更改SVG图像的颜色（jQuerySVG图像替换）中描述的方法，但没有任何更改。当我从浏览器中看到Inspect时，图像仍然是img标记，而不是SVG标记。。

问题是SVG嵌入了Object。。表单元格内的对象。。使用javascript逐行创建的表行我无法访问SVG矩形来更改它们。。这就是我的问题：（我已经试了一周了……当它是内联SVG时，我可以更改它，但许多嵌入对象中的SVG我无法更改它们

  <body>
    <fieldset id="output" class="form">
    <legend class="main">Output</legend>
    <br> 
  <table cellpadding="0" cellspacing="0" class="display" id="Table" style="table-layout: fixed" width="auto" >
    <tbody>
    </tbody>
  </table>
 </fieldset>
</body>

这里是脚本：

for( var j=0,g=0; g < 3; j++,g++ ) {
//--------- start drawing the table 
var table = document.getElementById("Table");
var row = document.createElement('tr');
row.id="singlerow";
// first col----
var link="http://imgh.us/A_acidus_CBS_106_47_Aspfo1_0027407.svg";
var obj = document.createElement('object');
obj.class="alphasvg";
obj.setAttribute('data',link );
obj.setAttribute('height','30px');
obj.setAttribute('width','300px');
var cell3 = row.insertCell(0);
cell3.id="genemodelcell";
cell3.appendChild(obj);

  //insert row
    table.appendChild(row);
}//end for loop

代码示例：单元格中对象内部的SVG

在我们交换了10000条评论后，以下是最终答案。

因此JS被解决了，您成功地将<img>更改为<svg>。你可以使用Iconic的SVGInjector来完成。

关于CSS，请查看您的SVG文件。每个元素都有内联样式。如果你用Adobe Illustrator绘制SVG，就会发生这种情况（我们可以在保存文件时更改选项，第一个结果是在谷歌中，查询是"SVG Illustrator inline css"）。因此，您必须清理SVG，删除样式属性，因为它将比样式表更强。这里是您可以拥有的SVG文件：

<svg xmlns="http://www.w3.org/2000/svg" height="210" width="500">
  <rect x="100" y="20" width="190" height="10"/>
</svg>

还有一些css：

svg rect {
  fill: tomato;
  stroke: midnightblue;
}

这里我更新了你的JSFiddle，有一些：悬停效果

PS：看，这就是我减少代码的意思，这样我们就可以发现问题了。您本可以删除JS，因为您从浏览器的检查器中提供了代码，所以JS已经被执行了。你可以清理你的DOM。另外，在进行实验时，SVG不需要那么复杂

相关文章：