javascript - jQuery SVG 插件 : how to display a predefined SVG image

标签 javascript jquery svg

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

我得到的唯一输出是一个大框(这是我用 CSS 设置样式的 div)和框内的“加载错误:”字样。我已经在 Chrome 和 Firefox 中试过了。在 Chrome 中,我必须将其作为“chromium-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>

最佳答案

需要注意的是,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>

关于javascript - jQuery SVG 插件 : how to display a predefined SVG image,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5206514/

相关文章:

javascript - 从 javascript 编辑点 cookie

javascript - Html5 Canvas 图形在悬停时填充

javascript 有条件地禁用按钮

java - Spring Securing Web 添加 css、js 和图像

javascript - express .静态: Cannot GET/

jQuery - 这段代码如何在没有滚动的情况下执行?

javascript - 超出 ResizeObserver 循环限制 - 停止异常

powershell - 写入Amazon AWS S3时排除文件或某些类型

html - svg inside scroll div 有一个底部排水沟

javascript - 我的内联 SVG 和嵌入式 SVG 存在问题