嵌入浏览器时 SVG 失去 Javascript 交互性答案

【问题标题】：SVG loses Javascript interactivity when embedded in a browser嵌入浏览器时 SVG 失去 Javascript 交互性
【发布时间】：2015-09-18 00:55:50
【问题描述】：

我创建了一个包含 JavaScript 的 SVG 文件。

当我在 Chrome 中将这个 SVG 文件作为独立文件运行时，它呈现正常。

当我将此 SVG 嵌入 HTML 页面时，它会失去交互性。

我做错了什么...？

由于种种原因，我不想使用JQuery、D3或将SVG的31行作为文本嵌入到HTML页面中。

我想使用如下标签在 HTML 中嵌入一个交互式 SVG 文件：

<img src="SVG-STO.svg" style="width:175px  height:258px">

这是“SVG-STO.svg”文件的缩短版本：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"  id="hexMap" viewBox="18 281 175 259"  width="175" height="259" xml:space="preserve"  style = "background-color: #EEEEEE;">

<script type="text/javascript">

<![CDATA[
var objNames =  
{
"AA":{"name":"Hex A","value":"965787"},
"BB":{"name":"Hex B","value":"48986"}
};

function m_over(hover_id) { 
var objName = objNames[hover_id].name;
var objValue = objNames[hover_id].value;
document.getElementById("TEXT_NAME").innerHTML = objName;
document.getElementById("TEXT_VALUE").innerHTML = objValue;
document.getElementById(hover_id).setAttribute("fill-opacity","0.3");}

function m_out(hover_id)   {
document.getElementById(hover_id).setAttribute("fill-opacity", "1.0");
console.log(hover_id);
document.getElementById("TEXT_NAME").innerHTML = "";
document.getElementById("TEXT_VALUE").innerHTML = "";
}
]]>
</script>
<text id = "TEXT_NAME" x = "28.74" y = "301" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Initial</text>

<text id = "TEXT_VALUE" x = "28.74" y = "321" font-family = "sans-serif" font-size = "10px" fill = "#FF00FF">Value</text>             

<path id="AA" style="stroke:#CCCCCC; stroke-width:1px; fill:#00A600;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,326l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>

<path id="BB" style="stroke:#CCCCCC; stroke-width:1px; fill:#19AF00;" onmouseover="m_over(this.id);" onmouseout="m_out(this.id);" d="M142.3397,356l-8.66,-15l8.66,-15h17.32l8.66,15l-8.66,15H142.3397z"/>

</svg>

【问题讨论】：

标签： javascript svg interactive

【解决方案1】：

出于隐私原因，大多数浏览器不允许img 标签的 SVG 交互性（浏览器将其解释为非交互图像）。要保留交互式 SVG 的所有功能，请改用 object 标签嵌入您的 SVG：

<object type="image/svg+xml" data="SVG-STO.svg" style="width:175px; height:258px"></object>

有关嵌入 SVG 文件的不同方法的更多信息，请参阅this CSS-Tricks article。

【讨论】：

其实并不是真的“不支持”。出于隐私原因，故意不允许这样做。
@PaulLeBeau 这就是我想说的——不过，“不支持”可能不是这个词，你是对的。