Question

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

我得到的唯一输出是一个大框（这是我用CSS设计的div）和框中的“错误加载：”。我在Chrome和Firefox中尝试过它。在Chrome中，我必须将其作为“chrome-browser --disable-web-security”运行。

以下是代码：

<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>

Answer 1

需要注意的一点是，使用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>

Answer 2

您不必使用脚本来包含独立的svg文件，但是如果您愿意，可以使用（如您的示例所示）。就个人而言，我发现通过引用（例如<object data="my.svg">）包含svg更清洁/更容易，但是你可以选择你想要的任何方式。

以下是some more ways to include svg（来自SVG Primer），不需要使用脚本。

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

2 个答案: