SVG.js v3.0 | Начало работы

Подготовка

Создайте базовую HTML-разметку и включите сценарий svg.js:

 

<голова>
  SVG.js  
<тело>

Или просто импортируйте svg.js в ваше приложение javascript:

 импортировать {SVG} из '@svgdotjs/svg.js'

Примечание. Все свойства, которые ранее были доступны для глобального объекта SVG, теперь необходимо импортировать, см. пример ниже: 

 импорт {SVG, расширение как SVGextend, элемент как SVGElement} из '@svgdotjs/svg.js'

Создать документ SVG

Затем используйте функцию SVG() , чтобы создать документ SVG и добавить его на страницу html:

 var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

Вы можете передать любой селектор CSS addTo или просто узел.

 <тело>

SVG.js не устанавливает размер документа автоматически. Поэтому обязательно вызовите size() с соответствующими значениями.
напр. чтобы установить размер в соответствии с размерами его родителя, используйте это:

 var draw = SVG().addTo('#someId').size('100%', '100%')

Дождитесь загрузки DOM

Это может показаться очевидным для многих, но все же стоит упомянуть. Если вы включаете файлы js в заголовок документа, обязательно дождитесь загрузки DOM:

.
 SVG.on(документ, 'DOMContentLoaded', function() {
  var draw = SVG().addTo('тело')
})

Это не проблема, если вы включите js внизу.

Чистый SVG

SVG.js также работает за пределами HTML DOM, например, внутри документа SVG:

 
 w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
  
  <тип сценария="текст/javascript">

Функция SVG()

Эта функция не только создает новые документы, но также может извлекать объекты svg.js из dom или создавать новые из фрагмента svg:

 // новый документ
переменная отрисовки = SVG()
// получаем прямоугольник из dom
var rect = SVG('#myRectId')
// или
переменная прямоугольная = SVG('прямая')
// подойдет любой CSS-селектор
var path = SVG('#group1 path.myClass')
// создаем новый объект из фрагмента
вар круг = SVG('<круг>')
// преобразовать узел в объект svg.js
var obj = SVG (узел)

Детская площадка

Просто для того, чтобы вы начали, вот базовая установка. Все есть, чтобы начать возиться.

SVG.js v3.0 | Контейнерные элементы

SVG.

Контейнер

Класс SVG.Container является базовой оболочкой для всех элементов, которые могут содержать другие элементы.

Стек наследования: SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element > SVG.Container .

Основная функция инициализации SVG.js создает корневой узел svg в данном элементе и возвращает экземпляр SVG.Svg .

Конструктор SVG()

возвращает SVG.Svg , который наследуется от SVG.Container 

 var draw = SVG().addTo('#drawing')

Примечание : при первом вызове SVG()

будет создан второй невидимый . Это наш парсер, как описано в FAQ.

Документ SVG также может быть создан внутри другого документа SVG. Затем он называется вложенным документом SVG:

.

конструктор вложенных()

конструктор на SVG. Container
возвращает SVG.Svg , который наследуется от SVG.Container 900 22 

 переменная вложенная = draw.nested()
var rect = вложенный.rect(200, 200)

Группировка элементов может быть полезна, если вы хотите преобразовать набор элементов, как если бы он был одним целым. Все элементы в группе сохраняют свое положение относительно группы, к которой они принадлежат.

Примечание: Группы не имеют собственной геометрии, она унаследована от их содержимого. Поэтому группы не слушают x , y , ширина и высота атрибуты. Если это то, что вы ищете, используйте вместо этого вложенный () svg.

конструктор группы()

конструктор SVG.Container
возвращает SVG.G который наследуется от SVG.

Контейнер

Группа имеет все те же методы элементов, что и корневой документ SVG:

 группа переменных = draw.group()
группа.путь('M10,20L30,40')

Существующие элементы из документа SVG также могут быть добавлены в группу:

 группа.добавить(прямо)

конструктор SVG.Container
возвращает SVG.Symbol который наследуется от 900 13 SVG.Контейнер

В отличие от элемента group , элемент symbol является контейнерным элементом. Единственная разница между символами и группами заключается в том, что символы не визуализируются. Поэтому 9Символ 0021 Элемент

идеально сочетается с элементом . Используйте элемент :

.
 символ переменной = draw.symbol()
символ.рект(100, 100).заполнить('#f09')
var use = draw.use(символ).move(200, 200)

Элемент является контейнером для элементов, на которые есть ссылки. Потомки узла не визуализируются напрямую. Узел находится в основном документе и может быть доступен с помощью

defs() 9Метод 0022.

конструктор defs()

конструктор SVG.Container
возвращает SVG.Defs который наследуется от 9001 3 SVG.Контейнер 

 переменная дефс = draw.defs()

Определения также доступны для любого другого элемента через метод root() :

 переменная дефс = прямок. корень(). дефс()

Узел defs работает точно так же, как группы.

Создайте гиперссылку, которая будет активна для всех дочерних элементов.

конструктор SVG.Container


возвращает SVG.A который наследуется от SVG.

No related posts.