Javascript 使SVG对象集成发挥作用

我试图了解更多关于html文档中SVG对象的信息，我在这里下载了这些示例的文件：[link]，但我无法使其正常工作。html文档返回空

我把这些标签放在那里：

您的浏览器不支持SVG

但还是不行

以下是html文件中的代码：

<script>
    $.get('fruit.svg', function(data) {
    // $.get('fruit_font.svg', function(data) {
    $(document.body).append(data.documentElement);

  // clicking row 1 will show the dialog
  $('#row1').click(function() {
    $('#tooltip').hide();
    // adding 'fast' as a parameter will make it fade
    $('#dialog').fadeIn();

  });

  // dialog close button
  $('#closebutton').click(function() {
    $('#dialog').hide();
  });

  // tooltip logic
  $('#row1').hover(
    function mouseover() {
      $('#tooltip').show();
    }, 
    function mouseleave() {
      $('#tooltip').hide();
    }
  );

});

</script>

$.get（'fruit.svg'，函数（数据）{
//$.get（'fruit\u font.svg'，函数（数据）{
$（document.body）.append（data.documentElement）；
//单击第1行将显示对话框
$（'#行1'）。单击（函数（）{
$（“#工具提示”）.hide（）；
//添加“fast”作为参数将使其褪色
$（'#dialog'）.fadeIn（）；
});
//对话框关闭按钮
$（“#关闭按钮”）。单击（函数（）{
$（'#dialog'）.hide（）；
});
//工具提示逻辑
$（'#行1'）。悬停(
函数mouseover（）{
$（“#工具提示”）.show（）；
}, 
函数mouseleave（）{
$（“#工具提示”）.hide（）；
}
);
});

风格：

<style>
#row1, #closebutton {
  cursor: pointer;
}
#closebutton {
  opacity: .7;  
}
#closebutton:hover {
  opacity: 1;  
}
</style>

#第1行，#关闭按钮{
光标：指针；
}
#关闭按钮{
不透明度：.7；
}
#关闭按钮：悬停{
不透明度：1；
}

---

感谢您的支持。

您是在本地机器上测试，还是在web服务器上测试？如果直接在浏览器中查看SVG，SVG是否工作？您确定指向SVG的链接正确吗？我正在本地机器上测试，而不是在web服务器上测试，请参见[链接]所有文件都位于同一目录中。控制台中显示“加载ressource失败”。可能您的svg位于另一个文件夹中？您的.svg文件看起来像什么？我的文件：[链接]我在本地计算机的浏览器中看到svg文件，但它不工作。在服务器上，我在浏览器控制台中看不到图像，我看到错误：

GEThttp://lisboa.smartmove.pt/SCPWebsite/fruit/fruit.svg 404（未找到）

。因此我认为您应该再次检查SVG URL。