Javascript jquerysvg插件：如何显示预定义的SVG图像_Javascript_Jquery_Svg

Javascript jquerysvg插件：如何显示预定义的SVG图像

javascript jquery svg

Javascript jquerysvg插件：如何显示预定义的SVG图像,javascript,jquery,svg,Javascript,Jquery,Svg,我正在尝试使用jQuery svg在HTML页面中显示.svg文件(http://keith-wood.name/svg.html). 这应该很简单，但我不能让它工作我得到的唯一输出是一个大框（这是我用CSS设计的div）和框中的“Error load:”字样。我已经在Chrome和Firefox上试过了。在Chrome中，我不得不以“Chrome浏览器——禁用web安全”的形式运行它代码如下： <html> <head> <style type="t

我正在尝试使用jQuery svg在HTML页面中显示.svg文件(http://keith-wood.name/svg.html). 这应该很简单，但我不能让它工作

我得到的唯一输出是一个大框（这是我用CSS设计的div）和框中的“Error load:”字样。我已经在Chrome和Firefox上试过了。在Chrome中，我不得不以“Chrome浏览器——禁用web安全”的形式运行它

代码如下：

<html>
<head>

    <style type="text/css">
        #canvas { width: 100%; height: 100%; border: 1px solid #484; }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.svg.min.js"></script>
    <script type="text/javascript" src="jquery.svgdom.min.js"></script>
    <script type="text/javascript" src="jquery.svganim.min.js"></script>
    <script type="text/javascript">

        $(document).ready ( function () {
            $('#canvas').svg({loadURL: 'lion.svg'});
        });

    </script>
</head>
<body>
    <div id='console'></div>
    <div id='canvas'></div>
</body>


#画布{宽度：100%；高度：100%；边框：1px实心#484；}
$（文档）.ready（函数（）{
$（'#canvas'）.svg（{loadURL:'lion.svg'}）；
});

需要注意的是，url是使用

jquery.ajax

调用加载的。因此，如果lion.svg是本地的，我认为它不会起作用。对我来说，如果我这样做，它就会起作用：

<html>
<head>

    <style type="text/css">
        #canvas { width: 100%; height: 100%; border: 1px solid #484; }
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svgdom.js"></script>
    <script type="text/javascript" src="http://keith-wood.name/js/jquery.svganim.js"></script>
    <script type="text/javascript">

        $(document).ready ( function () {
            $('#canvas').svg({loadURL: 'http://keith-wood.name/lion.svg'});
        });

    </script>
</head>
<body>
    <div id='console'></div>
    <div id='canvas'></div>
</body>


#画布{宽度：100%；高度：100%；边框：1px实心#484；}
$（文档）.ready（函数（）{
$（'#canvas'）.svg（{loadURL:'http://keith-wood.name/lion.svg'});
});

您不必使用脚本来包含独立的svg文件，但如果您愿意，可以使用脚本（如示例所示）。就个人而言，我觉得通过引用（例如

）包含svg更简单/更容易，但这取决于您选择哪种方式

下面是（来自的），它们不需要使用脚本。

Ahh-现在看起来很明显。谢谢我还找到了一个巧妙的方法来绕过它，促进当地的发展。如果安装了python，请转到文件所在的目录并运行“python-msimplehttpserver”。