我有 SVG 图像，我想将它们的文件导出为 img，然后将它们改回 SVG .. 更改的原因是我想更改 SVG 图像内的所有矩形颜色。
我使用了 How to change color of SVG image using CSS (jQuery SVG image replacement) 中描述的方法但没有任何改变。 当我从浏览器中看到 Inspect 时，我也看到图像仍然是 img 标签而不是 SVG 标签。
问题是 SVG 嵌入在对象中.. 对象在表格单元格中.. 使用 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
最佳答案
在我们交换了 10,000 条评论之后，这是最终答案。
那么JS就解决了，你的<img>改成功了至 <svg> .您可以使用 Iconic's SVGInjector去做。
关于 CSS，请查看您的 SVG 文件。每个元素都有内联样式。如果您使用 Adobe Illustrator 绘制 SVG，就会发生这种情况(我们可以在保存文件时更改选项，first result in google，查询是“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;
}
Here i an update of your JSFiddle, with some :hover effects
PS:看，这就是我所说的减少您的代码以便我们可以发现问题的意思。你可以删除 JS，因为你从浏览器的检查器中提供了代码，所以 JS 已经被执行了。你可以拥有一个干净的 DOM。另外，当您进行实验时，SVG 不需要那么复杂。
关于javascript - 将图像更改为内联 SVG >> 以获得所有 SVG 功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25796320/