Плагин jQuery SVG: как отобразить предопределенное изображение SVG - PullRequest
Новая
       0

Плагин jQuery SVG: как отобразить предопределенное изображение SVG

2 голосов
/ 05 марта 2011

Я пытаюсь отобразить файл .svg на странице HTML с помощью jQuery SVG (http://keith -wood.name / svg.html).Это должно быть довольно просто, но я не могу заставить его работать.

Единственный вывод, который я получаю, - это большая коробка (это мой div, стилизованный под CSS) и слова «Ошибка загрузки:» в коробке.Я пробовал это в 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>

Ответы [ 2 ]

1 голос
/ 06 марта 2011

Вам не нужно использовать скрипт для включения автономного файла SVG, но вы можете, если хотите (как показано в вашем примере). Лично я считаю, что проще / проще просто включить svg по ссылке (например, <object data="my.svg">), но вам решать, какой путь вы хотите.

Вот еще несколько способов включить svg (из SVG Primer ), которые не требуют использования сценариев.

1 голос
/ 06 марта 2011

Следует отметить, что 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...