Рабочий процесс Illustrator / SVG to JavaScript? (Библиотека шаблонов?) - PullRequest
Новая
       35

Рабочий процесс Illustrator / SVG to JavaScript? (Библиотека шаблонов?)

4 голосов
/ 20 октября 2011

Когда "Сохранить как SVG" в Illustrator, это типичный результат: 

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;"
     xml:space="preserve">
<g id="symbol1" ... >
   <path ... />
   <path ... />
   <path ... />
</g>
</svg>

Я хотел бы знать, есть ли какая-либо библиотека шаблонов JavaScript (например, усы, руль и т. Д.), Которая позволила бы мне использовать SVG аналогично HTML?
Это позволило бы мне сохранить кучу шаблонов элементов SVG и динамически устанавливать их атрибуты стиля и контент ...

Ответы [ 2 ]

0 голосов
/ 21 августа 2013

В соответствии с https://groups.google.com/forum/#!topic/d3-js/qVZ7hacBGrE вы можете использовать шаблоны подчеркивания.

На форуме также обсуждается альтернатива:

  1. создать svg "defs"
  2. вставить объект SVG с помощью "use"
  3. изменить его, используя d3.js
  4. сделать его видимым
0 голосов
/ 24 июля 2012

Я не уверен, отвечает ли это на ваш вопрос, поскольку неясно, что вы подразумеваете под «[использованием] SVG аналогично HTML», но есть библиотека JavaScript под названием Raphaël , которая позволяет Вы манипулируете графикой SVG способом, аналогичным использованию jQuery для манипулирования HTML-страницами. Это означает, что вы можете анимировать изображения, прикреплять обработчики событий, изменять цвета или формы в реальном времени на странице. (Бонус в том, что Raphaël использует VML для Internet Explorer без поддержки SVG.) Другой способ - использовать плагин jQuery SVG или некоторые другие библиотеки .

Конечно, SVG - это просто XML, который является текстовым форматом, поэтому любой шаблонизатор должен с ним работать, но различие в использовании Raphaël, jQuery SVG и т. Д. Состоит в том, что они не манипулируют исходным текстом базового формата XML, но получающееся дерево DOM , которое не только означает, что вы можете видеть результаты в реальном времени, пока вы изменяете дерево, но также и то, что намного труднее создавать недействительные документы, что довольно часто, если вы манипулируете исходным кодом XML с помощью шаблонов движки, которые обычно не понимают XML, но вместо этого обрабатывают его как любой текст.

Я рекомендую прочесть Иллюстратор для Raphael JS: Руководство и увидеть оба варианта Raphaël SVG Import и Raphaël SVG Import Classic на GitHub.

...