当嵌入到浏览器中时,SVG失去了Javascript的交互性
SVG loses Javascript interactivity when embedded in a browser
我创建了一个包含JavaScript的SVG文件。
当我在Chrome中运行这个SVG文件作为一个独立文件时,它呈现得很好。
当我在HTML页面中嵌入这个SVG时,它失去了交互性。
我做错了什么?
出于各种原因,我不想使用JQuery, D3或将31行SVG作为文本嵌入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>
由于隐私原因,大多数浏览器不允许img
标记的SVG交互(浏览器将其解释为非交互式图像)。要保留交互式SVG的所有特性,可以使用object
标记来嵌入SVG:
<object type="image/svg+xml" data="SVG-STO.svg" style="width:175px; height:258px"></object>
有关嵌入SVG文件的不同方式的更多信息,请参阅这篇CSS-Tricks文章。
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何更改<svg>标记为<img>用js标记
- 锚点元素不't使用svg时,请打开EDGE上的href
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- 使用onclick绘制SVG路径
- SVG/JavaScript:尝试选择和更改多边形点
- Javascript游戏输入失去焦点
- 顺时针旋转Svg元件
- 禁用SVG拖动
- 在select元素中显示highchart dashstyle(svg)
- jquery日期选择器失去了交互性
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 缩放Raphael/SVG容器以适应所有内容
- JavaScript-动态SVG-onload属性-未触发事件
- 设置动画时,SVG/Raphael大圆圈会变形
- 使用SVG和JavaScript创建波浪动画
- Canvas+svg路径动画,在路径中的特定点暂停一段时间,然后继续
- D3.js生成有效的SVG,但不显示任何内容
- 当嵌入到浏览器中时,SVG失去了Javascript的交互性