Я представлял много графических элементов раньше. Если многие графические элементы одинаковы, нужно ли мне каждый раз определять новый? Можем ли мы поделиться графикой? Это в центре внимания этого раздела - повторное использование элементов SVG.
Комбинация -G ЭлементыЭлемент G - это контейнер, который объединяет группу связанных графических элементов в целое; Таким образом, мы можем работать в целом. Этот элемент обычно может использоваться в сочетании с элементами DESC и заголовка для предоставления информации о структуре документа. Хорошо структурированные документы, как правило, хорошо читаемые и отображаются. Смотрите небольшой пример:
<svgxmlns = "http://www.w3.org/2000/svg"
версия = "1,1" ширина = "5см" height = "5 см">
<desc> twogroups, ealwoftworectangles </desc>
<gid = "group1" fill = "red">
<rectx = "1cm" y = "1cm" ширина = "1см" высота = "1см"/>
<rectx = "3cm" y = "1cm" ширина = "1см" высота = "1см"/>
</g>
<gid = "group2" fill = "blue">
<rectx = "1CM" y = "3CM" ширина = "1см" высота = "1см"/>
<rectx = "3CM" y = "3CM" ширина = "1 см" высота = "1см"/>
</g>
<!-Showoutline of Canvasing'Rect'Element->
<rectx = ". 01cm" y = ". 01cm" ширина = "4,98 см" высота = "4,98 см"
fill = "non" chrke = "blue" withidth = ". 02cm"/>
</svg>
Несколько моментов, чтобы отметить :1.xmlns = http: //www.w3.org/2000/svg указывает, что пространство имен по умолчанию всего элемента SVG составляет SVG. Это может быть опущено, когда нет двусмысленности. Поскольку документ SVG является документом XML, здесь применимы соответствующие правила для пространства имен XML. Например, вы можете дать указанное пространство имен, отображаемые в SVG, предоставить псевдоним для пространства имен и т. Д.
2.G Элементы могут быть вложены.
3. Объединенные графические элементы такие же, как отдельные элементы, и значение идентификатора может быть дано. Таким образом, когда это необходимо (например, анимация и повторное использование группы элементов), вы можете просто обратиться к этому значению идентификатора.
4. Сочетание набора графических элементов может установить соответствующие атрибуты этого набора элементов (заполнение, инсульт, преобразование и т. Д.), Который также является сценарием, в котором используются комбинации.
Шаблон - элемент символаЭлемент символа используется для определения графического шаблона (шаблон может содержать много графики), которая может быть создана элементом использования. Функции шаблона очень похожи на элемент G, оба предоставляют набор графических объектов, но есть некоторые различия. Разница от элемента G такова:
1. Сам элемент символа не будет отображаться, будут отображаться только экземпляры шаблона символа.
2. Символ элемент может иметь атрибуты Viewbox и консерваэспектр, которые позволяют символу масштабировать графические элементы.
С точки зрения рендеринга элементы, аналогичные элементам символов, являются маркерами (определяющие стрелки и маркеры) и элементы рисунка (определяющий цвет); Эти элементы не будут отображаться напрямую; Их использование в основном создается с помощью элемента использования. Именно по этой причине атрибут «отображения» не имеет смысла для символа.
Следующий измененный код показывает, как используется символ:
<svgxmlns = "http://www.w3.org/2000/svg"
xmlns: xlink = "http://www.w3.org/1999/xlink"
версия = "1,1" ширина = "5см" height = "5 см">
<desc> twogroups, ealwoftworectangles </desc>
<symbolid = "group1" fill = "red">
<rectx = "1cm" y = "1cm" ширина = "1см" высота = "1см"/>
<rectx = "3cm" y = "1cm" ширина = "1см" высота = "1см"/>
</символ>
<gid = "group2" fill = "blue">
<rectx = "1CM" y = "3CM" ширина = "1см" высота = "1см"/>
<rectx = "3CM" y = "3CM" ширина = "1 см" высота = "1см"/>
</g>
<usexlink: href = "#group1" target = "_ blank" rel = "nofollow">
<!-Showoutline of Canvasing'Rect'Element->
<rectx = ". 02 см" y = ". 02 см" ширина = "4,96 см" высота = "4,96 см"
fill = "non" chrke = "blue" withidth = ". 02cm"/>
</svg>
Определить элемент -defsSVG позволяет вам определить набор объектов, а затем повторно использовать его (обратите внимание, что это не просто графический объект). Наиболее распространенным примером является определение цвета градиента, а затем назначить атрибуты заполнения другим графическим объектам. Определение градиента не будет отображаться, поэтому объекты этого типа могут быть размещены в любом месте. Повторное использование часто встречается в графических объектах, и мы не хотим быть непосредственно при определении, но вместо этого хотим оказаться в ссылках. Это может быть реализовано с использованием элемента DEFS.
Вообще говоря, рекомендуемый подход заключается в том, чтобы поместить ссылочный объект в элемент DEFS, когда это возможно. Эти объекты обычно: altglyphdef, Clippath, курсор, фильтр, маркер, маска, рисунок, линейный режиссер, радиалградит, символ и графические объекты. Определение этих объектов в элементе DEFS легко понять, поэтому это улучшает доступность.
Фактически, элементы G, элементы символов и элементы определяют как объекты контейнеров, все обеспечивают повторное использование в различных градусах, но характеристики каждого элемента могут немного отличаться: например, элементы G отображаются непосредственно, символ и DEF не будут отображаться непосредственно, символ содержит атрибут ViewBox, который создаст новое окно.
Обычно элементам, определенным в DEFS, присваивается атрибут идентификатора и используется непосредственно везде, где они используются. В зависимости от элементов, эти определения могут использоваться в разных местах, таких как следующие прогрессивные цвета в качестве атрибутов:
<svgwidth = "8 см" высота = "3 см"
xmlns = "http://www.w3.org/2000/svg" версия = "1.1">
<cess> localurireferences withinancestor's'defs 'entem. </desc>
<FEFS>
<linearGradientId = "gradient01">
<stopoffset = "20%" stop-color = "#39f"/>
<stopoffset = "90%" stop-color = "#f3f"/>
</lineargradient>
</defs>
<rectx = "1см" y = "1CM" ширина = "6 см" высота = "1 см"
Fill = "url (#gradient01)"/>
</svg>
Определение элементов, связанных с графикой, может быть связано с документом с использованием элемента использования. Например:
<svgwidth = "10cm" height = "3cm" viewbox = "0010030" Версия = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<desc> exampuuse01-simplecaseof'use'on'rect '</desc>
<FEFS>
<ertiD = "myRect" width = "60" высота = "10"/>
</defs>
<rectx = ". 1" y = ". 1" ширина = "99,8" высота = "29,8"
fill = "none" chrke = "blue" withidth = ". 2"/>
<usex = "20" y = "10" xlink: href = "#myrect"/>
</svg>
Обратите внимание на использование пространства имен xlink здесь. Хотя большинство зрителей также будут правильно отображать этот элемент без него, для согласованности пространство имен xlink должно быть определена на элементе <svg> </svg>.
Цитатный элементЛюбое SVG, символ, G, один графический элемент и элемент использования, по существу, можно ссылаться (например, инициализировано) в виде объектов шаблона по элементу использования. Графический контент, на который ссылаются использование, будет отображаться в указанном месте. В отличие от элемента изображения, элемент использования не может ссылаться на весь документ.
Элемент использования также имеет атрибуты x, y, width и высот. Эти атрибуты могут быть опущены. Если не опущены, ссылочные координаты или длина графического контента будут сопоставлены с текущим пространством координат пользователя.
Процесс действия элемента использования эквивалентен глубокому копированию ссылочного объекта в независимое непубличное дерево DOM; Родительский узел этого дерева является элементом использования. Хотя это непубличный узел DOM, это по сути узел DOM. Следовательно, все значения атрибутов, анимация, события и настройки, связанные с CSS направленного объекта, будут скопированы и все еще будут работать. Более того, эти узлы также будут наследовать соответствующие атрибуты элемента использования и предка использования (обратите внимание, что указанные элементы являются глубокими копиями, и эти копированные элементы не имеют ничего общего с исходным элементом, поэтому атрибуты узел предка упоминается элемента). Если эти узлы сами имеют связанные (CSS) атрибуты, они также будут перезаписать унаследованные атрибуты, которые согласуются с обычными узлами DOM, поэтому будьте осторожны при использовании видимости: скрыта для элементов использования, и это не обязательно будет работать. Тем не менее, поскольку эти узлы не являютсяпубличными, в операциях DOM вы можете увидеть только элемент использования, так что вы можете использовать только элемент использования.
С точки зрения визуальных эффектов элемент использования больше похож на заполнителя, а визуальный эффект после рендеринга такой же, как и непосредственно рендеринг с указанным объектом:
1. Элемент использования относится к элементу символаВ этом случае визуальный эффект эквивалентен:
(1) изменить элемент использования на элемент G;
(2) Переместите все свойства использования, кроме x, y, ширина, высота, xlink: href в элемент G;
(3) поверните атрибуты использования x и y в Transtate (x, y) и добавьте к последнему атрибуту преобразования элемента G;
(4) Замените указанный элемент символа на элемент SVG. Этот элемент SVG явно будет использовать атрибуты ширины и высоты элемента использования (элемент использования не имеет этих атрибутов, что составляет 100%);
(5) Глубоко скопировать графическое содержание ссылочного элемента символа в замененном SVG.
2. Элемент использования относится к элементу SVGВ этом случае визуальный эффект эквивалентен:
(1) изменить элемент использования на элемент G;
(2) Переместите все свойства использования, кроме x, y, ширина, высота, xlink: href в элемент G;
(3) поверните атрибуты использования x и y в Transtate (x, y) и добавьте к последнему атрибуту преобразования элемента G;
(4) Скопируйте ссылочный элемент SVG, включая контент. Этот элемент SVG явно будет использовать атрибуты ширины и высоты элемента использования (элемент использования не имеет этих атрибутов и использует исходное значение);
3. Другие ситуацииВизуальный эффект в этих случаях эквивалентен:
(1) изменить элемент использования на элемент G;
(2) Переместите все свойства использования, кроме x, y, ширина, высота, xlink: href в элемент G;
(3) поверните атрибуты использования x и y в Transtate (x, y) и добавьте к последнему атрибуту преобразования элемента G;
(4) скопировать указанные элементы;
См. Визуальные эффекты следующего примера :<svgwidth = "10cm" height = "3cm" viewbox = "0010030" Версия = "1.1"
xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<desc> exampuuse03-'sus'witha'transform'attribute </desc>
<FEFS>
<ertiD = "myRect" x = "0" y = "0" ширина = "60" высота = "10"/>
</defs>
<rectx = ". 1" y = ". 1" ширина = "99,8" высота = "29,8"
fill = "none" chrke = "blue" withidth = ". 2"/>
<usexlink: href = "#myrect"
Transform = "Translate (20,2,5) вращения (10)"/>
</svg>
Следующая цифра выглядит так же, как и вышеуказанный рисунок :<svgwidth = "10 см" height = "3cm" viewbox = "0010030"
xmlns = "http://www.w3.org/2000/svg" версия = "1.1">
<desc> exampuuse03-'sus'witha'transform'attribute </desc>
<rectx = ". 1" y = ". 1" ширина = "99,8" высота = "29,8"
fill = "none" chrke = "blue" withidth = ". 2"/>
<gtransform = "translate (20,2,5) вращения (10)">
<rectx = "0" y = "0" ширина = "60" высота = "10"/>
</g>
</svg>
Практическая ссылка: Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspxЦентр разработки: https://developer.mozilla.org/en/svg
Популярная ссылка: http://www.chinasvg.com/
Официальный документ: http://www.w3.org/tr/svg11/