HTML5 SVG 2d Введение 8 - Структура документа и сопутствующие элементы резюме

Автор：Eve Cole Время обновления：2025-04-10 04:16:01

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

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

• Элементы анимации: Animate, AnimateColor, Animatemotion, AnimateTransform, Set;

• Объяснение Элементы: DESC, метаданные, название;

• Графические элементы: круг, эллипс, линия, путь, многоугольник, полилин, прямо;

• Структурные элементы: defs, g, svg, символ, использование;

• Градиентные элементы: линейныйглайент, радиалграграда;

• Другие элементы: a, altglyphdef, clippath, color-profile, cursor, фильтр, шрифт, шрифт, иностранный, изображение, маркер, маска, рисунок, сценарий, стиль, коммутатор, текст, просмотр и т. Д.

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

Window-svg элемент

Любые другие элементы могут быть размещены в любом порядке в элементе SVG, включая вложенные элементы SVG.

Свойства, поддерживаемые элементом SVG, обычно используются, а именно ID, класс, x, Y, ширина, высота, видопроход, консервационная техника и атрибуты, связанные с заполнением и ходом.

События, поддерживаемые элементом SVG, также обычно используются Onload, Onmouseover, Onmousemove, Onmousedown, Onmouseup, Onclick, Onfocusin, Onfocusout, Oneresize, Onscroll, Onulload и т. Д. Я не буду говорить о элементе SVG. Для получения полных атрибутов и списка событий, пожалуйста, обратитесь к официальной документации ниже.

Пояснительные элементы - элементы спуска и элементы заголовка

Каждый элемент контейнера (который может содержать другие элементы контейнера или элементы графических элементов, таких как: a, defs, glyph, g, marker, mask, отсутствующий глиф, шаблон, SVG, коммутатор и символ) и графические элементы могут содержать элементы DECS и заголовок. Эти два элемента являются вспомогательными элементами и используются для объяснения соответствующей ситуации; Их содержание текст. Когда документ SVG отображается, эти два элемента не будут отображаться в графике. Разница между двумя элементами не слишком большая. Название появляется в виде подсказывающего сообщение в некоторых реализациях, поэтому заголовок обычно помещается на первую позицию родительского элемента.

Типичные использования следующие:

<g>

<Title> CompanySalesbyRegion </title>

<desc>

Thatabarchart, который показывает

Companysalesbyregion.

</desc>

<!-barchartdefinedasvectordata->

</g>

</svg>

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

Маркерный элемент

Теги определяют графические элементы (стрелки и многоточечные маркеры), прикрепленные к одному или нескольким вершинам (вершины пути, линии, полилины или многоугольника). Стрелки могут быть прикреплены к начальной точке или конечной точке пути, линии или полилинии. Многоточечные теги могут добавить тег ко всем вершинам пути, линии, полилинии или многоугольника.

Маркер определяется элементом маркера, а затем устанавливает соответствующие атрибуты (маркер, маркер-старт, маркер-середина и маркер) в пути, линии, полилинии или многоугольника. См. Пример:

<svgwidth = "4in" height = "2in"

viewbox = "0040002000" версия = "1.1"

xmlns = "http://www.w3.org/2000/svg">

<FEFS>

<markerid = "Треугольник"

viewbox = "001010" refx = "0" refy = "5"

MarkerUnits = "Щепочка"

markerwidth = "4" markerheight = "3"

Orient = "Auto">

</marker>

</defs>

<desc> placinganarrowheadattheendofapath.

</desc>

<pathd = "M1000750L2000750L25001250"

fill = "none" rosck = "черная" withidth = "100"

marker-end = "url (#triangle)"/>

</svg>

Давайте подробно рассмотрим соответствующие знания маркера :

1. Маркер - это контейнерный элемент, который может хранить графические элементы, элементы контейнера, анимации, градиентные элементы и т. Д. В любом порядке.

2. Маркерный элемент может создать новое окно: Установите значение Viewbox.

3. Более важные атрибуты маркера:

Markerunits = strckwidth | userspaceonuse

Это свойство определяет систему координат, используемую содержимым маркеро -прогибы, маркера и маркера. Это свойство имеет 2 значения на выбор. Первое значение stuckwidth - это значение по умолчанию. Система координат, используемая содержимым атрибутов, маркера, маркера и маркера, равны значению, установленной шириной инсульта графического элемента маркера.

Например, в приведенном выше примере ширина маркера составляет 400, а высота - 300. Однако не путайте ее. Координаты, используемые путем в элементе Mark, являются новой системой координат пользователей, установленной ViewBox.

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

Refx, Refy: определяет координаты позиции ссылочной точки, выровненной с маркером. Например, в приведенном выше примере указанная точка является конечной точкой, и она должна быть выровнена с (0,5) положением маркера. Обратите внимание, что Refx и Refy Используйте систему координат конечного пользователя, преобразованную ViewBox.

Маркера, Markerheight: ширина и высота окна маркера, это легко понять.

Ориентирован: определяет угол поворота маркера. Вы можете указать угол или напрямую назначить Auto.

Авто представляет положительное направление оси X и вращается в соответствии со следующими правилами :

а Если точка, в которой расположен расположен маркер, принадлежит только одному пути, прямое направление оси X маркера совпадает с пути. См. Пример выше.

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

4. Маркерные атрибуты графических элементов

Чтобы ссылаться на маркер, необходимо использовать соответствующие атрибуты, в основном эти три: маркер-старт (поместите указанный маркер в отправную точку), маркер-средне (поместите указанный маркер на все точки, кроме отправной точки и конечной точки), маркера (положить ссылочный маркер в конечную точку). Значения этих трех атрибутов могут быть ни одной (представляют, что маркер не цитируется), ссылка на маркер (относится к определенному маркеру), наследу (излишне говорить).

Вы также можете увидеть использование маркера из приведенного выше примера.

Скрипт и стиль - элемент сценария и элемент стиля

На самом деле, в основном все атрибуты (для всех элементов, а не только текста) могут быть связаны с элементом с CSS, и все атрибуты CSS доступны на изображении SVG. Вы можете напрямую использовать атрибуты стиля для разработки стиля элемента или обратиться к стилю элемента дизайна листа стиля. Таблицы стилей не должны анализироваться для XML -файлов (потому что они иногда содержат символы, которые вызывают проблемы), поэтому их необходимо размещать в разделе XMLCData. То же самое относится и к сценариям, и они должны быть размещены в разделе XMLCData. Смотрите следующий пример CSS:

<desc> Текст </desc> <defs>

<! [Cdata [

.abbreviation {text-decoration: подчеркнуть;}

]]>

</style>

</defs>

<g>

<textx = "20" y = "50" font-size = "30"> ColorsCanbespecified </text>

<textx = "20" y = "100" font-size = "30"> bytheir

<tspanfill = "rgb (0,0,255)" class = "abbreviation"> b </tspan> значения </text>

<textx = "20" y = "150" font-size = "30"> orbykeywordssuchas </text>

<tspanstyle = "fill: lightsteelblue; размер шрифта: 30"> Lightsteelblue </tspan>,

</text>

</g>

</svg>

Давайте посмотрим на пример сценария:

<desc> scriptingtheonclickeken </desc>

<FEFS>

<! [Cdata [

functionHidereVeal (evt) {

variabletarget = evt.target;

varThefill = imageTarget.getAttribute ("fill");

if (thefill == 'белый')

ImageTarget.setAttribute ("fill", "url (#notes)");

еще

ImageTarget.setAttribute ("Fill", "White");

}

]]>

</script>

<patternid = "Примечания" x = "0" y = "0" ширина = "50" высота = "75"

Patterntransform = "watate (15)"

PatternUnits = "userpaceonuse">

<linex1 = "20" y1 = "30" x2 = "20" y2 = "0"

strck-width = "3" ход = "черный"/>

<linex1 = "20" y1 = "0" x2 = "30" y2 = "5"

strck-width = "3" ход = "черный"/>

</pattern>

</defs>

<ellipseonclick = "hidereveal (evt)" cx = "175" cy = "100" rx = "125" ry = "60"

fill = "url (#notes)" rosck = "черный" wydth = "5"/>

</svg>

Условная обработка - элемент переключения

Атрибуты условной обработки - это атрибуты, которые могут контролировать, отображается ли элемент или нет. В основном большинство элементов (особенно графических элементов) могут указывать свойства условной обработки. Существуют 3 условных свойства обработки: обязательные функции, необходимые эстисты и системное языко. Эти свойства представляют собой набор тестов, которые позволяют вам указать список значений (первые два свойства разделены пространствами, а языковые свойства разделены запятыми), а значения по умолчанию истины.

Элемент переключателя SVG обеспечивает возможность отображать в соответствии с указанными условиями. Элемент коммутатора - это элемент контейнера, который может содержать графические элементы, пояснительные элементы, элементы анимации, A, иностранный, G, изображение, SVG, коммутатор, текст, использование и другие элементы. Элемент переключения проверит условные атрибуты обработки прямых дочерних элементов по порядку, а затем отображает первый дочерний элемент, который соответствует его собственным условиям. Другие детские элементы будут проигнорированы. Эти свойства, как и свойства дисплея, будут влиять только на визуализацию элементов, которые используют эти свойства напрямую, и не будут влиять на указанные элементы (например, элементы, на которые ссылается использование). Проще говоря, эти три атрибута будут влиять на такие элементы, как A, Altglyph, ForeignObject, TextPath, Tref, TSPAN, Animate, AnimateColor, Animatemotion, AnimateTransform, Set и т. Д., И не будут влиять на такие элементы, как DEF, курсор, маска, клиппат, модель (эти элементы не поддаются или они ссылаются на другие элементы).

ПРИМЕЧАНИЕ . Значения атрибута отображения и видимости детского элемента не влияют на результат суждения о состоянии элемента переключателя.

Для списка значений для условных атрибутов обработки, пожалуйста, обратитесь к официальному документу. Вот небольшой пример:

<rectreequiredfeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10" y = "10" ширина = "322" высота = "502" opacity = "0,6"

Fill = "Black" Insck = "none" filter = "url (#GBLSHADOW)"/>

<rectx = "10" y = "10" ширина = "322" высота = "502" opacity = "0,6"

Fill = "Black" Incke = "none"/>

</switch>

Значение этого примера просто: используемый браузер поддерживает функцию фильтра, затем нарисуйте вышеупомянутый прямоугольник (с атрибутом фильтра). Если функция фильтра не поддерживается, нарисуйте прямоугольник ниже.

На самом деле, чаще всего наиболее часто используемым атрибутом является SystemLanguage, которая представляет собой способность к многоязычной обработке текста. Например:

</switch>

</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/