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

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

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

  1. circle1: синий заполненный круг witdh, который id

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

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

 

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

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

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

Благодарю.

Готово!

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

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

           
Click Me!

И этот образец файла Red1.svg:

   Hello!  

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

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

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

    2а. со стилем

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

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

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

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

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

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

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

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

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

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

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

 document.querySelectorAll = null; 

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

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

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

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

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

  • Как масштабировать SVG-изображение, чтобы заполнить окно браузера?
  • Устаревшая анимация SMIL SVG заменена эффектами CSS или веб-анимации (наведите курсор, щелкните)
  • Преобразование из EPS в формат SVG
  • Доступность: рекомендуемое соглашение об альт-тексте для SVG и MathML?
  • Отбрасывание SVG с помощью css3
  • img src SVG изменение цвета заливки
  • Рисование SVG-файла на canvasе HTML5
  • Изображение SVG не работает в Firefox
  • Отображение SVG в OpenGL без промежуточного растра
  • Создание SVG из LaTeX (tikz)?
  • Экспорт графов Excel в виде файлов векторной графики (например, SVG)?
  • Interesting Posts

    Как удалить учетную запись из приложения Mail в Windows 8?

    R Блестящая привязка ввода ключа

    Обменный звонок «все-в-одном»

    Могу ли я ssh где-нибудь, запустить некоторые команды, а затем оставить себе подсказку?

    Как копировать выходные данные из удаленной команды в локальный буфер обмена?

    Окно столбца DataGridView – значение и функциональность

    Эффективная максимальная длина письма: длина тела

    Получите pdf-вложения из Gmail в виде текста

    Изменение короткого имени в Mac OS X

    Создать экземпляр родового типа в Java?

    Загрузка файла jQuery: возможно ли инициировать загрузку с помощью кнопки отправки?

    переменная экземпляра против символа в rubyе на рельсах (form_for)

    Зачем использовать в C #?

    UISegmentedControl выбран цвет сегмента

    Ошибка Gmail. Для SMTP-сервера требуется защищенное соединение или клиент не прошел аутентификацию. Ответ сервера: 5.5.1 Требуется аутентификация

    Давайте будем гением компьютера.