Изменить файл SVG с помощью jQuery - PullRequest
Новая
       34

Изменить файл SVG с помощью jQuery

17 голосов
/ 12 апреля 2011

У меня есть файл SVG с некоторой формой и текстом. Я хотел бы изменить svg во время выполнения, чтобы какая-то форма могла менять цвет, а часть текста - его содержимое.

Предположим, что у меня есть только два элемента во внешнем SVG-файле:

  1. circle1: синий круг с идентификатором

  2. text1: текст, содержащий «-» с этим идентификатором

Теперь я могу просмотреть файл в моем html с помощью 

<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>

С помощью кнопки рядом с изображением, используя jQuery, я могу поймать событие onClick: я хотел бы заполнить цикл красным и изменить текст на «привет слово».

Как я могу это сделать? Есть ли решение на основе jQuery?

Я нашел плагин jquery.svg, но кажется, что вы можете изменять только документ, созданный во время выполнения.

Спасибо.

Ответы [ 4 ]

14 голосов
/ 13 апреля 2011

Готово!

Наконец-то я нашел документацию на jQuery.svg. и на самом svg.

Начнем с кода: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script> 
</head>
<body>

<script type="text/javascript">

$(document).ready(function() 
    {
    $("#svgload").svg({
        onLoad: function()
            {
            var svg = $("#svgload").svg('get');
            svg.load('Red1.svg', {addTo: true,  changeSize: false});        
            },
        settings: {}}
        );  


    $('#btnTest').click(function(e)
        {
        var rect = $('#idRect1');
        rect.css('fill','green');
        //rect.attrib('fill','green');

        var txt = $('#idText1');
        txt.text('FF');
     });    

    });
</Script>   

<div id="svgload" style="width: 100%; height: 300px;"></div>

<div id="btnTest">
Click Me!
</div>

</body>
</html>

И этот пример файла Red1.svg: 

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

<rect id="idRect1" fill="#FF0000" width="300" height="300"/> 
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>

</svg>

Используя jQuery, я загрузил внешний Red1.svg во время выполнения. Нажав на btnTest, я устанавливаю текст и цвет заливки.

В своем исследовании я обнаружил, что:

  1. С помощью jQuery.svg я могу получить доступ к элементам файла SVG и стандартному тегу html

  2. SVG позволяет выбрать способ установки цвета заливки

    2a. со стилем 

        rect.css('fill','green');

    2b. с определенным тегом 

        rect.attr('fill','green');

Таким образом, ваш код должен меняться в зависимости от программы, которая сгенерировала svg.

Хорошего дня.

2 голосов
/ 12 апреля 2011

Ну, есть библиотека FANTASTIC, которую вы можете использовать с jQuery или любым другим javascript:

Рафаэль JS: http://raphaeljs.com/

Проверьте образцы, вы можете сделать что угодно.

1 голос
/ 12 апреля 2011

Я использую svgweb для отображения и программного управления SVG с использованием JavaScript. Я использую его, потому что он портирует SVG в IE6 + с использованием Flash, и потому что он обеспечивает некоторые удобные функции загрузки SVG.

Так как я очень люблю использовать jQuery, я установил его для работы с svgweb. Я использовал сценарий Кита Вудса в качестве примера. Код Кейта не поддерживает последнюю версию jQuery.

Вот патч: jquery.svgweb-and-svgdom-patch Я собирался придать ему подходящее место в контенте svgweb, но пока не нашел его. Он основан на патче Кейта, но имеет некоторые обновления. Следует знать, что для IE перед загрузкой jQuery необходимо поместить следующий код в скрипт: 

document.querySelectorAll = null;

Недостаточно сделать это после загрузки jQuery, поэтому вам придется использовать обнаружение браузера на стороне сервера, чтобы внедрить его, или обнаружение браузера на стороне клиента в сценарии перед jQuery.

После всего этого ... Вы можете делать такие вещи, как: 

$('#mycirc').attr('fill', 'Red');
0 голосов
/ 13 апреля 2011

http://irunmywebsite.com/raphael/additionalhelp.php?q=path Выше приведен лишь один интерактивный пример на моем сайте. Я бы просто сказал, что нашел собак Рафаэля точными, но они имеют минимум медведя, я думаю, что автор рекомендует самостоятельно исследовать

I 'Я так извиняюсь, что извиняюсь за ломаный английский !!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...