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

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

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

circle1: синий заполненный круг witdh, который id
text1: текст, содержащий "-" с этим id

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

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

От кнопки рядом с изображением, используя jQuery, я могу поймать событие onClick: я хотел бы заполнить cicle красным и изменить текст на "привет слово".

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

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

Спасибо.

Ответ 1

Готово!

Наконец, я нашел документацию по 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, я установил текст и цвет заливки.

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

С jQuery.svg я могу получить доступ к элементам в файле SVG и стандартном теге html
SVG позволяет выбрать способ, которым вы хотите установить цвет заливки

2а. со стилем
```
    rect.css('fill','green');
```
2b. с определенным тегом
```
    rect.attr('fill','green');
```

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

Хороший день.

Ответ 2

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

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

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

Ответ 3

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

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

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

document.querySelectorAll = null;

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

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

$('#mycirc').attr('fill', 'Red');

Ответ 4

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

Я ipodding, поэтому извините сломанный английский!!