Средство разработки MathML - MathML

Средство разработки MathML
==========================

Эта страница объясняет, как записать математические выражения при помощи языка MathML. Подобно HTML, основными элементами языка MathML являются теги и атрибуты. Документ HTML становится сложным, когда он содержит структуры, подобные спискам или таблицам, но, к счастью, существует много генераторов на основе простых систем обозначений, WYSIWYG редакторы и другие системы управления контентом, помогающие создавать Web страницы.

Математические обозначения ещё более сложны со структурами такими, как дроби, квадратные корни или матрицы, которые, вероятно, потребуют собственных тегов. Поэтому инструменты разработки, связанные с MathML, очень важны. Некоторые из этих инструментов мы описываем ниже. В частности, команда Mozilla MathML разрабатывала TeXZilla (Javascript Unicode LaTeX-to-MathML конвертер), который предназначен для использования во многих сценариях, описанных здесь. Конечно, этот список ни в коем случае не является исчерпывающим и вам предлагается проверить W3C MathML software list, где вы можете найти некоторые другие инструменты.

Заметим, что MathML хорошо интегрирован в HTML5. В частности, вы можете использовать обычные Web-инструменты, такие как CSS, DOM, Javascript или SVG. Данная тема выходит за рамки этого документа, но любой, у кого есть базовые знания Web-языков, сможет легко совместить эти инструменты с MathML. Ознакомьтесь с нашими примерами и справочными данными по MathML для получения более подробной информации.

Использование MathML
--------------------

#### MathML на страницах HTML

Вы можете использовать Presentation MathML внутри документов HTML5:

```html
<!doctype html>
<html>
  <head>
    <title>MathML in HTML5</title>
  </head>
  <body>
    <h1>MathML in HTML5</h1>

    <p>
      Square root of two:
      <math>
        <msqrt>
          <mn>2</mn>
        </msqrt>
      </math>
    </p>
  </body>
</html>
```

Content MathML не поддерживается браузерами. Рекомендуется преобразовать ваш макет из Content MathML в Presentation MathML перед его публикацией, например, с помощью таблицы стилей ctop.xsl . Инструменты, упомянутые на этой странице, генерируют Presentation MathML.

#### Варианты для браузеров без поддержки MathML

К сожалению, некоторые браузеры не могут отображать выражения MathML или имеют ограниченную поддержку. Следовательно, вам нужно будет использовать полифил MathML, чтобы обеспечить некоторый резервный рендеринг. Если вам нужны только базовые математические конструкции, такие как те, которые используются в этой MDN wiki, тогда небольшой таблицы стилей mathml.css возможно будет достаточно. Для её использования, просто вставьте одну строку в заголовок вашего документа:

```html
<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>
```

Если вам нужны более сложные конструкции, тогда вы можете вместо этого использовать более содержательную библиотеку MathJax как полифил MathML:

```html
<script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
```

Обратите внимание, что эти два скрипта распознают элементы mspace (en-US) или mpadded (en-US) (см. Таблицу совместимости браузера на этих страницах). Существует также подобный скрипт, отображающий предупреждение в верхней части страницы для браузеров без хорошей поддержки MathML и позволяющий пользователям выбрать один из вариантов действий:

```html
<script src="http://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script>
```

Если вы не хотите использовать эту ссылку на GitHub, но вместо этого хотите интегрировать эти полифилы или нечто другое в свой проект, тогда вам может понадобиться скрипт, проверяющий уровень поддержки MathML. Например, следующая функция проверяет поддержку MathML путём тестирования элемента mspace (вы можете заменить `mspace` на `mpadded`):

```js
function hasMathMLSupport() {
  var div = document.createElement("div"),
    box;
  div.innerHTML = "<math><mspace height='23px' width='77px'/></math>";
  document.body.appendChild(div);
  box = div.firstChild.firstChild.getBoundingClientRect();
  document.body.removeChild(div);
  return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1;
}
```

В качестве альтернативы, следующий анализ строки UA позволит определить движок рендеринга с родной поддержкой MathML (Gecko и WebKit). Обратите внимание, что анализ строки UA является не самым надёжным методом и может сбоить от версии к версии:

```js
var ua = navigator.userAgent;
var isGecko =
  ua.indexOf("Gecko") > -1 &&
  ua.indexOf("KHTML") === -1 &&
  ua.indexOf("Trident") === -1;
var isWebKit = ua.indexOf("AppleWebKit") > -1 && ua.indexOf("Chrome") === -1;
```

#### Математические шрифты

Для того, чтобы получить хорошую разметку или обеспечить нужный стиль, важно иметь математические шрифты. Всегда полезно обеспечить ссылку на инструкцию по шрифтам MDN (en-US), чтобы ваши посетители могли проверить - установлены ли соответствующие шрифты в их системе. Хорошо также, если будет создана резервная копия веб-шрифтов.

До Gecko 31.0 было утомительно устанавливать математические шрифты (смотрите инструкцию по установке шрифтов для Mozilla 2.0). Для Gecko 31.0 это намного проще и совместимо со всеми движками Web рендеринга с поддержкой MathML. Например, здесь представлена минимальная таблица стилей для использования шрифта Latin Modern для текста и шрифта Latin Modern Math для математических выражений:

```css
@namespace url("http://www.w3.org/1999/xhtml");
@namespace m url("http://www.w3.org/1998/Math/MathML");

body,
m|mtext {
  font-family: Latin Modern;
}
m|math {
  font-family: Latin Modern Math;
}
```

Затем вы можете использовать правило @font-face, как обычно, для обеспечения выбора WOFF для Latin Modern и Latin Modern Math. Смотрите репозиторий GitHub с WOFF шрифтами и примерами таблиц стилей CSS для использования на вашем Web-сайте, а также этот ресурс с тестами.

#### MathML в документах XML (XHTML, EPUB, и т.д.)

Если по какой-то причине вам нужно использовать MathML в документах XML, обязательно выполняйте обычные требования: хорошо сформированный документ, использование правильного MIME-типа, пространство имён MathML `"http://www.w3.org/1998/Math/MathML"` с корневым элементом `<math>`. Например, версия XHTML предыдущего примера выглядит так:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
 "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>XHTML+MathML Example</title>
</head>
<body>

<h1>Пример XHTML+MathML</h1>

  <p>
    Квадратный корень из двух:
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <msqrt>
        <mn>2</mn>
      </msqrt>
    </math>
  </p>

</body>
</html>
```

#### MathML в клиентах email и клиентах обмена мгновенными сообщениями

Современные почтовые клиенты могут посылать и получать электронные сообщения в формате HTML5, то есть в них можно использовать выражения MathML. Обязательно включите опции "отправить как HTML" и "просмотреть как HTML". В Thunderbird вы можете использовать команду "Вставить HTML", чтобы вставить код HTML + MathML. MathBird - удобное дополнение для Thunderbird для вставки таких выражений MathML с использованием синтаксиса ввода AsciiMath. Кроме того, поле ввода LaTeX-to-MathML также было интегрировано в SeaMonkey с версии 2.28 и в Thunderbird с версии 31. С другой стороны, обработка кода MathML и качество рендеринга MathML зависит от почтового клиента. Даже если ваш браузер поддерживает MathML, ваша электронная почта может помешать вам отправить или получить сообщение с MathML внутри.

Клиенты мгновенного обмена сообщениями на базе Gecko могут интегрировать конвертер на основе Javascript, преобразующий текст в код MathML (см. ниже), и отображать выражения MathML, созданные из обычного текста мгновенных сообщений. Например, есть дополнение Instantbird, которое обрабатывает выражения LaTeX.

Конвертация из простого синтаксиса
----------------------------------

Для генерации HTML-страниц существует множество простых синтаксических систем (например, wiki или синтаксисы разметки). То же самое верно для MathML: например, синтаксисы ASCII, используемые в калькуляторах, или более мощный язык LaTeX очень популярны среди научного сообщества. В этом разделе мы представляем некоторые из таких инструментов для преобразования из простого синтаксиса в MathML.

* плюсы:
    + Для написания математических выражений может потребоваться только стандартный текстовый редактор.
    + Доступны многие инструменты, некоторые из которых совместимы с классическим рабочим процессом LaTeX-to-pdf.
    + Это даёт доступ к расширенным возможностям макросов, подобных макросам LaTeX.
* минусы:
    + Это может быть труднее в использовании: люди должны изучить синтаксис, опечатки в коде могут легко привести к ошибкам парсинга или рендеринга и т.д.
    + Интерфейс не является дружественным для пользователя: есть только редактор кода без немедленного отображения математического выражения.
    + Ни один из синтаксисов не был стандартизирован, что затрудняет кросс-совместимость между конвертерами. Даже популярный язык LaTeX продолжает пополняться новыми пакетами.
### Конвертация на стороне клиента

В Web-среде наиболее очевидным методом преобразования простого синтаксиса в дерево DOM является использование Javascript и, конечно же, для выполнения этой задачи было разработано множество библиотек.

* плюсы:
    + Очень простая настройка: необходимо только загрузить несколько файлов Javascript и CSS и/или добавить ссылки link в заголовок документа.
    + Это чистое Web-решение: все делается браузерами, и никакие другие программы не должны устанавливаться или компилироваться.
* минусы:
    + Это не будет работать, если у пользователя отключён Javascript.
    + Код MathML не поддерживается Web-сканерами (например, средствами математического поиска или новостными агрегаторами). В частности, ваш контент не будет отображаться правильно на Planet.
    + Конвертация должна выполняться при каждой загрузке страницы, может быть медленной и может конфликтовать с парсингом HTML (например, "<" для тегов или "$" для денежных сумм)
    + Возможно вам понадобится синхронизировать Javascript-конвертер с другими программами Javascript на вашей странице.

TeXZilla имеет пользовательский элемент <x-tex> который может использоваться для записи таких вещей, как
```

<x-tex>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</x-tex>
```

и автоматически преобразуется в MathML. Это все ещё в процессе разработки и может быть улучшено в будущем благодаря Web-компонентам и DOM. Кроме того, вы можете использовать более традиционный Javascript парсинг выражений в процессе загрузки как это используют и все другие инструменты, описанные в этом разделе.

Одним из простых инструментов конвертации на стороне клиента является ASCIIMathML. Просто загрузите скрипт ASCIIMathML.js и скопируйте его на ваш Web-сайт. Затем на ваших веб-страницах добавьте тег `<script>` для загрузки ASCIIMathML и математические выражения, выделенные символом ``` (знак акцента) будут автоматически обработаны и преобразованы в MathML:

```html

    ...

    ...

    ...

blah blah `x^2 + y^2 = r^2` blah ... ...

```

LaTeXMathML - это похожий скрипт, который позволяет анализировать больше команд LaTeX. Установка похожа: скопируйте LaTeXMathML.js и LaTeXMathML.standardarticle.css, добавьте ссылки в заголовок вашего документа, а содержимое LaTeX вашей веб-страницы, помеченное классом "LaTeX", будет автоматически проанализировано и преобразовано в HTML+MathML:

```html

  ...

  <link
 rel="stylesheet"
 type="text/css"
 href="LaTeXMathML.standardarticle.css" />
  ...

  ...

    \documentclass[12pt]{article} \begin{document} \title{LaTeXML Example}
    \maketitle \begin{abstract} This is a sample LaTeXML document.
    \end{abstract} \section{First Section} $$ \sum_{n=1}^{+\infty} \frac{1}{n^2}
    = \frac{\pi^2}{6} $$ \end{document}

  ...

```

jqMath - это ещё один скрипт для парсинга простого LaTeX-подобного синтаксиса, который также принимает не-ASCII символы, такие как `√{∑↙{n=1}↖{+∞} 6/n^2} = π` , чтобы написать

∑

n
=
1

+
∞

6

n
2

=
π

. Установка похожа: загрузите и скопируйте соответствующие файлы Javascript и CSS files на ваш Web сайт и сделайте ссылку на них в заголовке вашей страницы (смотрите файл `COPY-ME.html` из архива zip в качестве примера). Одним из преимуществ jqMath над предыдущими сценариями является то, что он автоматически добавит некоторые простые правила CSS для математической разметки и сделает формулы доступными для браузеров с ограниченной поддержкой MathML.

### Программы командной строки

Альтернативный способ - парсить простой синтаксис перед публикацией ваших Web-страниц. В этом случае вы используете программы командной строки для создания и публикации этих статических страниц на своём сервере.

* плюсы:
    + Вы получаете статические Web-страницы: исходный текст LaTeX не нужно парсить при каждой загрузке страницы, код MathML доступен Web-сканерам, и вы можете легко размещать их на любом Web-сервере.
    + Бинарные программы могут работать быстрее, чем Javascript-программы, и могут быть более содержательными, то есть иметь более полную поддержку LaTeX или генерировать другие форматы, такие как EPUB.
    + Вы можете поддерживать совместимость с другими инструментами для генерации pdf, то есть вы можете использовать один и тот же исходник .tex как для Latex, так и для Latexml.
* минусы:
    + Это требует установки программ на вашем компьютере, что может быть немного сложнее или они могут быть доступны не для всех платформ.
    + Вы должны запускать программы на своём компьютере и иметь какой-то рабочий процесс для получения веб-страниц в конце; это может быть немного утомительно.
    + Двоичные программы не подходят для их интеграции в расширение Mozilla или приложение XUL.

TeXZilla может использоваться из командной строки и будет, по существу, иметь ту же поддержку, что и itex2MML, описанный ниже. Однако поведение фильтра потока ещё не реализовано.

Если вы хотите просто парсить простые математические выражения LaTeX, вы можете попробовать такие инструменты, как itex2MML или Blahtex. Последнее часто доступно в дистрибутивах Linux. Давайте рассмотрим первое, которое изначально было написано Полом Гартсайдом в начале проекта Mozilla MathML и с тех пор поддерживается Жаком Дистлером. Это небольшой фильтр потока, написанный на C/C++ и сгенерированный с помощью flex и bison; в частности, оно очень быстрое. Установите flex/bison, а также классический компилятор и сгенерируйте инструменты. В Unix вы можете загрузить itex2MML, скомпилировать и установить его:

```bash
wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \
tar -xzf itexToMML.tar.gz; \
cd itex2MML/itex-src;
make
sudo make install
```

Теперь предположим, что у вас есть HTML страница с фрагментами TeX, разделёнными долларами:

```html
input.html

...

$\sqrt{a^2-3c}$

$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$

```

Затем, чтобы сгенерировать HTML страницу из input.html, с заменой выражений TeX на выражения MathML, просто выполните
```

cat input.html | itex2MML > output.html
```

Существуют ещё более содержательные инструменты для преобразования произвольных документов LaTeX в HTML+MathML. Например, TeX4ht часто включается в дистрибутивы TeX и имеет возможность использовать MathML вместо изображений PNG. Эта команда создаст XHTML+MathML документ foo.xml из LaTeX исходника foo.tex:
```

   mk4ht mzlatex foo.tex # Linux/Mac platforms
   mzlatex foo.tex       # Windows platform
```

Заметим, что tex4ebook опирается на TeX4ht для создания документов EPUB.

LaTeXML - это ещё один инструмент, который может создавать документы HTML5 и EPUB. Пользователи Windows могут посмотреть это видео-руководство. Для LaTeX файла foo.tex, вы можете использовать следующие простые команды:
```

  latexmlc --dest foo.html foo.tex # Создаёт HTML5 документ foo.html
  latexmlc --dest foo.epub foo.tex # Создаёт EPUB документ foo.epub
```

В случаях с браузерами без поддержки MathML, вы можете использовать параметр `--javascript`, чтобы сообщить LaTeXML о включении одного из дополнительных скриптов:

```html
latexmlc --dest foo.html
--javascript=http://fred-wang.github.io/mathml.css/mspace.js foo.tex # Вариант с
добавлением CSS latexmlc --dest foo.html
--javascript=http://fred-wang.github.io/mathjax.js/mpadded-min.js foo.tex #
Вариант с добавлением MathJax
```

Если ваш документ LaTeX - большой, вы можете разбить его на несколько небольших страниц, а не размещать все на одной большой странице. Например, это разделит страницы на уровне `\section`:
```

  latexmlc --dest foo.html --splitat=section foo.tex
```

### Конвертация на стороне сервера

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

TeXZilla, LaTeXML и Mathoid могут использоваться для выполнения преобразования LaTeX-to-MathML на стороне сервера. Instiki и MediaWiki - это два wiki движка, которые поддерживают преобразование LaTeX-to-MathML.

Графический интерфейс
---------------------

### Поле ввода

TeXZilla имеет несколько интерфейсов, включая плагин CKEditor, используемый в MDN, онлайн демо и дополнение Firefox или FirefoxOS Webapp. Он также был интегрирован в SeaMonkey с версии 2.28 и в Thunderbird с версии 31. Abiword содержит небольшой редактор уравнений, основанный на itex2MML. Наконец, Bluegriffon имеет дополнение для вставки формул MathML в ваш документ, используя синтаксис, подобный ASCII/LaTeX.

![BlueGriffon](/ru/docs/Web/MathML/Authoring/mathml-shot1.png)

### WYSIYWG редакторы

Firemath - это расширение для Firefox, которое является WYSIWYG редактором MathML. Предварительный просмотр формулы осуществляется с помощью механизма рендеринга Mozilla. Сгенерированный код MathML доступен в нижней части окна. Используйте текстовое поле для ввода простых элементов (токенов) и кнопки для создания более сложных конструкций. После того, как вы завершите редактирование, вы сможете сохранить свой документ в виде страницы XHTML.

LyX - это графический LaTeX редактор, который имеет встроенную поддержку экспорта XHTML+MathML и может быть сконфигурирован на использование конвертеров вида LaTeX-to-(X)HTML. Например, вы можете настроить его для экспорта LaTeXML HTML5/EPUB.

В OpenOffice и LibreOffice есть редакторы уравнений (File → New → Formula). Это наполовину WYSIWYG: с помощью панели уравнений/клавиатуры вы вводите исходный текст для формулы и предосмотр полученной формулы соответственно обновляется. Редактор использует свой собственный синтаксис "StarMath" для исходных текстов, но при сохранении документа генерируется также и соответствующий код MathML. Для получения кода MathML, сохраните документ как mml и откройте его любым текстовым редактором. Как вариант, вы можете разархивировать файл odf (на самом деле zip-архив) и открыть xml файл `content.xml`.

![Open Office Math](/ru/docs/Web/MathML/Authoring/openoffice.png)

Amaya - это Web-редактор от W3C, способный обрабатывать MathML внутри документов XHTML. Используйте элементы из Elements и панель Special Chars для создания различных продвинутых математических конструкций. Простой текст, такой как `a+2`, автоматически парсится и создаётся соответствующая разметка MathML. Как только вы закончите, вы сможете напрямую сохранить свою страницу XHTML и открыть её в Mozilla.

Распознавание видимых символов и рукописного текста
---------------------------------------------------

Inftyreader способен выполнять некоторое распознавание видимых символов, включающее перевод математических уравнений в MathML. Другие инструменты могут выполнять распознавание рукописного ввода, например, Windows Math Input Panel или онлайн конвертер Web Equation.

### Информация об исходном документе

* Автор(ы): Frédéric Wang
* Другие участники: Florian Scholz
* Информация об авторских правах (Copyright): Авторские права на данный контент (© 2010) принадлежат отдельным участникам проекта mozilla.org; Контент доступен в соответствии с лицензией Creative Commons | Подробности.


Справка по атрибутам MathML - MathML

Справка по атрибутам MathML
===========================

Ниже приведён список атрибутов MathML в алфавитном порядке. Более подробная информация о каждом атрибуте доступна на странице элементов.

Примечания:

* Элементы MathML `<mstyle>` и `<math>` принимают все атрибуты MathML.
* Смотри примечания (en-US) к значениям и единицам измерения в MathML.
* Атрибуты `background`, `color`, `fontfamily`, `fontsize`, `fontstyle`, `fontweight` и `xlink:href` являются устаревшими.
* XLink (en-US) атрибуты для элементов MathML: `xlink:actuate`, `xlink:href`, `xlink:show` и `xlink:type` также устарели.

| Название | Элементы, принимающие атрибут | Описание |
| --- | --- | --- |
| `accent` | `<mo> (en-US)`, `<mover>`, `<munderover> (en-US)` | Логическое значение, определяющее, нужно ли оператор рассматривать как акцент. |
| `accentunder` | `<munder> (en-US)`, `<munderover> (en-US)` | Логическое значение, определяющее, нужно ли оператор рассматривать как акцент. |
| `actiontype` | `<maction>` | Строковое значение, определяющее выполняемое для этого элемента действие. |
| `align`
Устарело
 | `<mtable> (en-US)` `<munder> (en-US)`, `<mover>`, `<munderover> (en-US)` `<mstack>` | Задаёт различное выравнивание нескольких элементов (смотри подробности на страницах с элементами). |
| Не реализовано `alignmentscope` | `<mtable> (en-US)` | Логическое значение, указывающее, должны ли столбцы таблицы действовать как области выравнивания или нет. |
| Не реализовано `altimg` `altimg-width` `altimg-height` `altimg-valign` `alttext` | `<math>` | Визуальные и текстовые варианты отката. |
| `bevelled`
Устарело
 | `<mfrac> (en-US)` | Задаёт стиль отображения дроби. Не рекомендуется. Вместо этого используйте U+2044 (дробная косая черта). |
| Не реализовано `charalign` | `<mstack>` | Определяет горизонтальное выравнивание цифр. |
| `close` | `<mfenced>` | Строка закрывающего разделителя. |
| `columnalign` | `<mtable> (en-US)`, `<mtd> (en-US)`, `<mtr> (en-US)`, `<mlabeledtr>` | Определяет горизонтальное выравнивание клеток таблицы. |
| `columnlines` | `<mtable> (en-US)` | Задаёт границы столбца таблицы. |
| `columnspacing` | `<mtable> (en-US)` | Задаёт пространство между колонками таблицы. |
| `columnspan` | `<mtd> (en-US)` | Неотрицательное целое число, указывающее, на сколько столбцов таблицы распространяется ячейка. |
| Не реализовано `columnwidth` | `<mtable> (en-US)` | Задаёт ширину колонок таблицы. |
| Не реализовано `crossout` | `<mscarry>` | Указывает, какая линия проводится для пересечения переносчиков. |
| Не реализовано `decimalpoint` | `<mstyle>` | Если значение `decimalpoint` используется для указания выравнивания, этот атрибут определяет символ для точки внутри `<mstack>` и `<mtable> (en-US)` колонок. |
| `denomalign`
Устарело
 | `<mfrac> (en-US)` | Выравнивание знаменателя под дробью. |
| `depth` | `<mpadded> (en-US)` | Устанавливает или увеличивает глубину. Смотри длины (en-US). |
| `dir` | `<math>`, `<mi> (en-US)`, `<mo> (en-US)`, `<mrow> (en-US)`, `<ms> (en-US)`, `<mtext> (en-US)` | Направление текста. Возможны значения `ltr` (слева направо) или `rtl` (справа налево). |
| `display` | `<math>` | Задаёт режим визуализации. Допускаются значения `block` и `inline`. |
| `displaystyle` | *All* | Логическое значение, указывающее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение `false`, для отображения формул используется более компактный макет.*В MathML 3 этот атрибут был действителен только на `<mstyle>`, `<mtable> (en-US)`, и `<math>`.* |
| Не реализовано `edge` | `<malignmark>` |  |
| Не реализовано `equalcolumns` | `<mtable> (en-US)` | Логическое значение, указывающее, следует ли принудительно задавать для всех столбцов одинаковую общую высоту. |
| Не реализовано `equalrows` | `<mtable> (en-US)` | Логическое значение, указывающее, принудить ли все строки иметь одинаковую общую высоту. |
| `fence` | `<mo> (en-US)` | Логическое значение, определяющее, является ли оператор ограждающим (например, круглые скобки). Для этого атрибута нет визуального эффекта. |
| Не реализовано `form` | `<mo> (en-US)` | Задаёт роль оператора во вложенном выражении. |
| `frame` | `<mtable> (en-US)` | Определяет границы всего `<mtable> (en-US)`. Возможные значения: `none` (по умолчанию), `solid` и `dashed`. |
| `framespacing` | `<mtable> (en-US)` | Задаёт дополнительное пространство, добавленное между таблицей и `frame`. |
| Не реализовано `groupalign` | `<maligngroup>`, `<mtable> (en-US)`, `<mtd> (en-US)`, `<mtr> (en-US)` |  |
| `height` | `<mglyph>`, `<mpadded> (en-US)`, `<mspace> (en-US)` | Задаёт желаемую высоту. Для возможных значений смотри длины (en-US). |
| `href` | *All* | Используется для создания гиперссылки к заданному URI. |
| `id` | *All* | Устанавливает уникальный идентификатор, связанный с элементом. |
| Не реализовано `indentalign` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indentalignfirst` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indentalignlast` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indentshift` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indentshiftfirst` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indentshiftlast` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `indenttarget` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `infixlinebreakstyle` | `<mstyle>` | Задаёт стиль по умолчанию для `linebreakstyle` для использования в инфиксных операторах. |
| `largeop` | `<mo> (en-US)` | Указывает, следует ли рисовать оператор больше обычного. |
| `length` | `<msline>` |  |
| Не реализовано `linebreak` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `linebreakmultchar` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `linebreakstyle` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| Не реализовано `lineleading` | `<mo> (en-US)`, `<mspace> (en-US)` |  |
| `linethickness` | `<mfrac> (en-US)` | Толщина горизонтальной линии дроби. |
| Не реализовано `location` | `<mscarries>` |  |
| Не реализовано `longdivstyle` | `<mlongdiv>` | Управляет стилем макета с длинным разделением. |
| `lspace` | `<mo> (en-US)`, `<mpadded> (en-US)` | Количество места перед оператором (смотри длины (en-US) для значений и единиц). |
| `lquote` | `<ms> (en-US)` | Начальный символ цитаты (зависит от `dir`), отгораживающий содержимое. Значение по умолчанию: "`"`". |
| `mathbackground` | *All* | Цвет фона. Возможно использование `#rgb`, `#rrggbb` и названия цветов HTML. |
| `mathcolor` | *All* | Цвет текста. Возможно использование `#rgb`, `#rrggbb` и названия цветов HTML. |
| `mathsize` | `<mi> (en-US)`, `<mn>`, `<mo> (en-US)`, `<ms> (en-US)`, `<mtext> (en-US)` | Размер содержимого. |
| `mathvariant` | `<mi> (en-US)`, `<mn>`, `<mo> (en-US)`, `<ms> (en-US)`, `<mtext> (en-US)` | Логический класс идентификатора, который варьируется в типографике. |
| `maxsize` | `<mo> (en-US)` | Максимальный размер оператора. |
| Не реализовано `minlabelspacing` | `<mtable> (en-US)` | Значение длины (en-US), определяющее минимальное расстояние между label и соседней ячейкой в строке. |
| `minsize` | `<mo> (en-US)` | Минимальный размер оператора. |
| `movablelimits` | `<mo> (en-US)` | Определяет, перемещаются ли присоединённые нижние и верхние индексы на позиции нижних и верхних индексов. |
| `notation` | `<menclose>` | Список обозначений, разделённых пробелом, для применения к дочерним элементам. |
| `numalign`
Устарело
 | `<mfrac> (en-US)` | Выравнивание числителя по дроби. |
| `open` | `<mfenced>` | Строка открывающего разделителя. |
| Не реализовано `overflow` | `<math>` | Если выражение слишком длинное, чтобы уместиться в допустимой ширине, этот атрибут устанавливает предпочтительную обработку. |
| Не реализовано `position` | `<msgroup>`, `<msrow>`, `<mscarries>`, `<msline>` |  |
| `rowalign` | `<mtable> (en-US)`, `<mtd> (en-US)`, `<mtr> (en-US)` | Задаёт вертикальное выравнивание ячеек таблицы. |
| `rowlines` | `<mtable> (en-US)` | Задаёт границы строки таблицы. |
| `rowspacing` | `<mtable> (en-US)` | Задаёт расстояние между строками таблицы. |
| `rowspan` | `<mtd> (en-US)` | Неотрицательное целочисленное значение, указывающее, на сколько строк расширяется ячейка. |
| `rspace` | `<mo> (en-US)` | Количество места после оператора. |
| `rquote` | `<ms> (en-US)` | Закрывающая кавычка (зависит от `dir`), заключающая содержимое. Значение по умолчанию: "`"`". |
| `scriptlevel` | `<mstyle>` | В основном контролирует размер шрифта. Чем выше `scriptlevel`, тем меньше размер шрифта. |
| `scriptminsize` | `<mstyle>` | Задаёт минимальный размер шрифта, разрешённый из-за изменений в `scriptlevel`. |
| `scriptsizemultiplier` | `<mstyle>` | Определяет множитель, который будет использоваться для настройки размера шрифта из-за изменений в `scriptlevel`. |
| `selection` | `<maction>` | Дочерний элемент, к которому обращается действие. |
| `separator` | `<mo> (en-US)` | Для этого атрибута нет визуального эффекта, но он указывает, является ли оператор разделителем (например, запятыми). |
| `separators` | `<mfenced>` | Последовательность из нуля или более символов, используемых для разных разделителей. |
| Не реализовано `shift` | `<msgroup>` |  |
| Не реализовано `side` | `<mtable> (en-US)` | Задаёт позицию, в которой `<mlabeledtr>` должны быть размещены элементы метки. |
| Не реализовано `src` | `<mglyph>` | Расположение ресурса изображения. |
| Не реализовано `stackalign` | `<mstack>` |  |
| `stretchy` | `<mo> (en-US)` | Указывает, растягивается ли оператор до размера соседнего элемента. |
| `subscriptshift`
Устарело
 | `<mmultiscripts> (en-US)`, `<msub> (en-US)`, `<msubsup> (en-US)` | Минимальный интервал, на который можно сместить нижний индекс ниже базовой линии выражения. |
| `supscriptshift`
Устарело
 | `<mmultiscripts> (en-US)`, `<msup> (en-US)`, `<msubsup> (en-US)` | Минимальное расстояние, на которое можно сместить верхний индекс над базовой линией выражения. |
| `symmetric` | `<mo> (en-US)` | Если `stretchy` установлено в `true`, то этот атрибут указывает, должен ли оператор быть вертикально симметричным относительно воображаемой математической оси (центрированная дробная линия). |
| `voffset` | `<mpadded> (en-US)` | Устанавливает вертикальное положение дочернего содержимого. |
| `width` | `<mglyph>`, `<mpadded> (en-US)`, `<mspace> (en-US)`, `<mtable> (en-US)` | Задаёт желаемую ширину. Смотри длины (en-US) для возможных значений. |
| `xlink:href`
Устарело
 | *All* | Может использоваться для установки гиперссылки на указанный URI. Однако авторам рекомендуется использовать вместо этого атрибут `href`. |
| `xmlns` | `<math>` | Задаёт URI для пространства имён MathML (`http://www.w3.org/1998/Math/MathML`) |


Примеры - MathML

Примеры
=======

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

Теорема Пифагора

Небольшой пример, демонстрирующий доказательство теоремы Пифагора.

Вывод квадратичной формулы

Излагается вывод Квадратичной Формулы.

Мучительный тест MathML

Большой набор тестов разметки.


Справка по элементам MathML - MathML

Справка по элементам MathML
===========================

Здесь представлен алфавитный список **презентационных (presentation)** элементов MathML.

Термин **презентационная разметка (presentation markup)** используется для описания разметки отображения математической системы обозначений, тогда как **разметка содержимого (content markup)** обеспечивает базовый математический смысл и не должна воспроизводиться парсером MathML (смотрите Firefox bug 276028). Если вы хотите узнать больше о разметке контента, вы можете изучить Chapter 4 из спецификации MathML 3.

### math

* `<math>` (Top-level element)
### A

* `<maction>` (Binded actions to sub-expressions)
* `<maligngroup>` (Alignment group)
* `<malignmark>` (Alignment points)
### E

* `<menclose>` (Enclosed contents)
* `<merror>` (Enclosed syntax error messages)
### F

* `<mfenced>` (Parentheses)
* `<mfrac> (en-US)` (Fraction)
### G

* `<mglyph>` (Displaying non-standard symbols)
### I

* `<mi> (en-US)` (Identifier)
### L

* `<mlabeledtr>` (Labeled row in a table or a matrix)
* `<mlongdiv>` (Long division notation)
### M

* `<mmultiscripts> (en-US)` (Prescripts and tensor indices)
### N

* `<mn>` (Number)
### O

* `<mo> (en-US)` (Operator)
* `<mover>` (Overscript)
### P

* `<mpadded> (en-US)` (Space around content)
* `<mphantom> (en-US)` (Invisible content with reserved space)
### R

* `<mroot> (en-US)` (Radical with specified index)
* `<mrow> (en-US)` (Grouped sub-expressions)
### S

* `<ms> (en-US)` (String literal)
* `<mscarries>` (Annotations such as carries)
* `<mscarry>` (Single carry, child element of `<mscarries>`)
* `<msgroup>` (Grouped rows of `<mstack>` and `<mlongdiv>` elements)
* `<msline>` (Horizontal lines inside `<mstack>` elements)
* `<mspace> (en-US)` (Space)
* `<msqrt> (en-US)` (Square root without an index)
* `<msrow>` (Rows in `<mstack>` elements)
* `<mstack>` (Stacked alignment)
* `<mstyle>` (Style change)
* `<msub> (en-US)` (Subscript)
* `<msup> (en-US)` (Superscript)
* `<msubsup> (en-US)` (Subscript-superscript pair)
### T

* `<mtable> (en-US)` (Table or matrix)
* `<mtd> (en-US)` (Cell in a table or a matrix)
* `<mtext> (en-US)` (Text)
* `<mtr> (en-US)` (Row in a table or a matrix)
### U

* `<munder> (en-US)` (Underscript)
* `<munderover> (en-US)` (Underscript-overscript pair)
### Other elements

* `<semantics> (en-US)` (Container for semantic annotations)
* `<annotation>` (en-US) (Data annotations)
* `<annotation-xml>` (en-US) (XML annotations)
See also
--------

* MathML
* MathML attribute reference


Доказательство теоремы Пифагора - MathML

Доказательство теоремы Пифагора
===============================

Сейчас мы докажем Теорему Пифагора:

**Утверждение**: В прямоугольном треугольнике квадрат гипотенузы равен сумме квадратов двух других сторон (катетов).

То есть, если

a
a

 и

b
b

 - катеты, а

c
c

 - гипотенуза, то

a
2

+

b
2

=

c
2

a^2 + b^2 = c^2

.

**Доказательство:** Мы можем доказать теорему алгебраически, показав, что площадь большого квадрата равна площади внутреннего квадрата (квадрата гипотенузы) плюс площадь четырёх треугольников:

(
a
+
b

)
2

=

c
2

+
4
⋅

(

1
2

⋅
a
b

)

(a + b)^2 = c^2 + 4 \cdot \left( \frac{1}{2} \cdot ab \right)

a
2

+
2
⋅
a
b
+

b
2

=

c
2

+
2
⋅
a
b

a^2 + 2 \cdot ab + b^2 = c^2 + 2 \cdot ab

a
2

+

b
2

=

c
2

a^2 + b^2 = c^2


MathML: Вывод Квадратичной Формулы - MathML

MathML: Вывод Квадратичной Формулы
==================================

На этой странице описывается вывод Квадратичной Формулы.

Мы берём квадратное уравнение в его общем виде и решаем для х:

a

x
2

+
b

x

+
c

=
0

a

x
2

+
b

x

=
-
 c

x
2

+

b

a

x

=

-
c

a

Делим на главный коэффициент.

x
2

+

b

a

x
+

b

2
a

2

=

-
c
(
4
a
)

a
(
4
a
)

+

b
2

4

a
2

Дополняем до квадрата.

(
x
+

b

2
a

)
(
x
+

b

2
a

)
=

b
2

-
4
a
c

4

a
2

Получен дискриминант.

(
x
+

b

2
a

)

2

=

b
2

-
4
a
c

4

a
2

x
+

b

2
a

=

b
2

-
4
a
c

4

a
2

x

=

-
b

2
a

±

{
C
}

b
2

-
4
a
c

4

a
2

Это основная формула.

x

=

-
b
±

{
C
}

b
2

-
4
a
c

2
a


<merror> - MathML

<merror>
========

Элемент MathML `<merror>` используется для отображения содержимого в виде сообщений об ошибках. В Firefox это сообщение об ошибке отображается аналогично типичному сообщению об ошибке XML. Обратите внимание, что эта ошибка **не** выдаётся, если ваша разметка MathML неверна или неправильно сформирован XML. Вы всё равно получите ошибку разбора XML (в случае XHTML-нотации MathML), которая не имеет ничего общего с `<merror>`.

Атрибуты
--------

class, id, style

Предполагается использование с таблицами стилей.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона. Ты можешь использовать `#rgb`, `#rrggbb` и имена цветов HTML (en-US).

mathcolor

Цвет текста, а также цвет линии дроби. Вы можете использовать `#rgb`, `#rrggbb` и имена цветов HTML (en-US).

Примеры
-------

```html
<math>
  <merror>
    <mrow>
      <mtext> Деление на ноль: </mtext>
      <mfrac>
        <mn> 1 </mn>
        <mn> 0 </mn>
      </mfrac>
    </mrow>
  </merror>
</math>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # error-message-merror |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mstyle> - MathML

<mstyle>
========

Элемент `<mstyle>` разметки MathML используется для изменения стиля его дочерних элементов. Он принимает все атрибуты всех элементов представления MathML, за некоторыми исключениями и c дополнительными атрибутами, перечисленными ниже.

Атрибуты
--------

`dir`

Общая направленность формулы. Возможные значения: либо `ltr` (слева направо), либо `rtl` (справа налево).

`decimalpoint`

Этот атрибут определяет символ для точки выравнивания внутри `<mstack>` и `<mtable> (en-US)` столбцов, если значение `decimalpoint` используется для определения выравнивания.

`displaystyle`

Логическое значение, определяющее, используется ли большое вертикальное пространство для отображаемых уравнений; если установлено значение `false`, то используется более компактный макет. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда `displaystyle` установлено на `true`. Смотрите также `largeop` и `movablelimits` на `<mo> (en-US)`.

`infixlinebreakstyle`

Задаёт `linebreakstyle` по умолчанию для использования в инфиксных операторах. Допустимы значения `before`, `after` и `duplicate`.

`scriptlevel`

В основном контроллирует размер шрифта. Чем больше значение `scriptlevel`, тем меньше размер шрифта. Этот атрибут поддерживает неотрицательные целые числа, а также знаки "+" или "-", которые увеличивают или уменьшают текущее значение соответственно. Кроме того, атрибут `scriptlevel` никогда не может уменьшить размер шрифта ниже значения `scriptminsize` во избежание нечитабельных мелких шрифтов и зависит от множителя, определённого в `scriptsizemultiplier`.

`scriptminsize`

Определяет минимальный размер шрифта, допустимый для изменений атрибутом `scriptlevel`. Значение по умолчанию: 8pt.

`scriptsizemultiplier`

Определяет множитель, используемый для настройки размера шрифта в `scriptlevel`. Значение по умолчанию: 0.71.

Элемент `<mstyle>` принимает все атрибуты (en-US) всех элементов представления, за исключением:

* `height`, `depth` или `width` не применимы к `<mglyph>`, `<mpadded> (en-US)` или `<mtable> (en-US)`.
* `rowalign`, `columnalign` или `groupalign` не применимы `<mtr> (en-US)`, `<mlabeledtr>`, `<mtd> (en-US)` или `<maligngroup>`.
* `lspace` или `voffset` не применимы к `<mpadded> (en-US)`.
* `fontfamily` не применим к `<mglyph>`.
* `align` не применим к `<mtable> (en-US)` или `<mstack>`.
* `index` не может быть установлен на `<mstyle>`.
* `src` и `alt` на `<mglyph>` не могут быть установлены на `<mstyle>`.
* `actiontype` на `<maction>` не может быть установлен на `<mstyle>`.
Примеры
-------

Использование `displaystyle` и `mathcolor` для изменения стиля макета всей суммы.

```html
<math>
  <mstyle displaystyle="true" mathcolor="teal">
    <mrow>
      <munderover>
        <mo stretchy="true" form="prefix">∑</mo>
        <mrow>
          <mi>i</mi>
          <mo form="infix">=</mo>
          <mn>1</mn>
        </mrow>
        <mi>n</mi>
      </munderover>

      <mstyle displaystyle="true">
        <mfrac>
          <mn>1</mn>
          <mi>n</mi>
        </mfrac>
      </mstyle>
    </mrow>
  </mstyle>
</math>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # style-change-mstyle |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mover> - MathML

<mover>
=======

Элемент `<mover>` языка разметки MathML используется для добавления акцента или ограничения на выражение. Используйте синтаксис: `<mover>``базовый надстрочный символ</mover>`

Атрибуты
--------

accent

 Если установлено `true`, то over-script - это *акцент*, приближенный к базовому выражению.
 Если установлено `false` (по умолчанию) over-script это *ограничение* по базовому выражению.

align
Устарело

 Выравнивание над сценарием. Возможные значения: `left`, `center`, и `right`.
 Этот атрибут устарел и будет удалён в будущем. Вместо этого используйте CSS `text-align`.

class, id, style

Предусмотрено для использования с таблицами стилей.

`displaystyle`

Логическое значение, определяющее, используется ли больше вертикального пространства для отображаемых уравнений или, если установлено значение `false`, используется более компактный макет для отображения формул. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда `displaystyle` установлено в `true`. Смотрите также `largeop` и `movablelimits` для `<mo> (en-US)`.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона. Возможно использование `#rgb`, `#rrggbb` и имён цветов HTML.

mathcolor

Цвет текста. Возможно использование `#rgb`, `#rrggbb` и имён цветов HTML.

Примеры
-------

Образец:
 ![x+y+z](/files/3196/mover.png)

Отображение в вашем браузере:

x
+
y
+
z

⏞

```html
<math>
  <mover accent="true">
    <mrow>
      <mi> x </mi>
      <mo> + </mo>
      <mi> y </mi>
      <mo> + </mo>
      <mi> z </mi>
    </mrow>
    <mo>
      ⏞
      <!-- Верхняя фигурная скобка -->
    </mo>
  </mover>
</math>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # underscripts-and-overscripts-munder-mover-munderover |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<munder> (en-US)` (Underscript)
* `<munderover> (en-US)` (Underscript-overscript pair)


<math> - MathML

<math>
======

Элементом верхнего уровня в MathML является тэг `<math>`, используемый для представления одной математической формулы. Он может находится в HTML-контенте, где разрешено потоковое содержимое.

**Примечание:** Посмотрите страницу «Разработка MathML» с советами по правильной интеграции MathML-формул на ваши веб-страницы и примеры использования MathML.

Атрибуты
--------

Атрибуты этого элемента включают глобальные атрибуты MathML (en-US), а также следующий атрибут:

`display`

Этот перечислимый (en-US) атрибут определяет, как должна отображаться разметка MathML. Он может иметь одно из следующих значений:

* `block` означает, что элемент будет отображаться в собственном блоке за пределами текущего диапазона текста и со значением `math-style` (en-US) установленным в `normal`.
* `inline` означает, что элемент будет отображаться внутри текущего фрагмента текста и со значением `math-style` (en-US) установленным в `compact`.

Если атрибут отсутствует, то значением по умолчанию является `inline`.

Примеры
-------

Этот пример содержит две MathML-формулы. Первый отображается в отдельном центрированном блоке, занимающем столько места, сколько необходимо. Второй отображается внутри абзаца текста с уменьшенным размером и межстрочным интервалом, чтобы минимизировать его высоту.

```html
<p>
  Бесконечная сумма
  <math display="block">
    <mrow>
      <munderover>
        <mo>∑</mo>
        <mrow>
          <mi>n</mi>
          <mo>=</mo>
          <mn>1</mn>
        </mrow>
        <mrow>
          <mo>+</mo>
          <mn>∞</mn>
        </mrow>
      </munderover>
      <mfrac>
        <mn>1</mn>
        <msup>
          <mi>n</mi>
          <mn>2</mn>
        </msup>
      </mfrac>
    </mrow>
  </math>
  равна действительному числу
  <math display="inline">
    <mfrac>
      <msup>
        <mi>π</mi>
        <mn>2</mn>
      </msup>
      <mn>6</mn>
    </mfrac></math
 >.
</p>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # the-top-level-math-element |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* HTML-элемент верхнего уровня: `<html>`
* SVG-элемент верхнего уровня: `<svg>`


<maction> - MathML

<maction>
=========

Элемент MathML **`<maction>`** обеспечивает возможность связать действия с (под-) выражениями. Само действие задаётся с помощью атрибута`actiontype`, который может принимать несколько значений. Чтобы указать каким дочерним элементам адресовано действие, вы можете использовать атрибут `selection`.

Атрибуты
--------

actiontype

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

* `statusline`: Если кликнуть на *выражении (expression)* или читатель наведёт курсор на него, *сообщение (message)* будет отправлено в строку состояния браузера. Синтаксис: `<maction actiontype="statusline"> expression message </maction>.`
* `toggle`: Если кликнуть на подвыражении, рендеринг чередует отображение выбранных подвыражений. Поэтому с каждым кликом `выбираемое` значение меняется на следующее.
 Синтаксис: `<maction actiontype="toggle" selection="positive-integer" > expression1 expression2 expressionN </maction>`.
* `tooltip`: Когда указатель перемещается над *выражением (expression)*, рядом с выражением отображается всплывающая подсказка с *сообщением (message)*.
 Синтаксис: `<maction actiontype="tooltip"> expression message </maction>.`

class, id, style

Предусматривается для использования с таблицами стилей.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона. Вы можете использовать `#rgb`, `#rrggbb` и названия цветов HTML (en-US).

mathcolor

Цвет текста и цвет пунктирной линии. Вы можете использовать `#rgb`, `#rrggbb` и названия цветов HTML (en-US).

selection

Дочерний элемент, которому адресуется действие. Значение по умолчанию равно 1, что соответствует первому дочернему элементу.

Примеры
-------

В следующем примере используется атрибут `actiontype` со значением `"toggle"`:

```html
<math>
  <maction actiontype="toggle">
    <mfrac>
      <mn>6</mn>
      <mn>8</mn>
    </mfrac>

    <mfrac>
      <mrow>
        <mn>3</mn>
        <mo>⋅</mo>
        <mn>2</mn>
      </mrow>
      <mrow>
        <mn>4</mn>
        <mo>⋅</mo>
        <mn>2</mn>
      </mrow>
    </mfrac>

    <mfrac>
      <mn>3</mn>
      <mn>4</mn>
    </mfrac>
  </maction>
</math>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # dfn-maction |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mn> - MathML

<mn>
====

Элемент `<mn>` разметки MathML представляет собой числовой литерал, который обычно является последовательностью цифр с возможным разделителем (точкой или запятой). Тем не менее, в нём также может быть произвольный текст, который на самом деле является числом, например "eleven" ("одиннадцать").

Атрибуты
--------

class, id, style

Предусмотрено для использования с таблицами стилей.

dir

Направление текста. Возможные значения: либо `ltr` (слева направо) или `rtl` (справа налево).

`displaystyle`

Логическое значение, определяющее, используется ли большое вертикальное пространство для отображаемых уравнений; если установлено значение `false`, то используется более компактный макет. Основной эффект заключается в том, что отображаются более крупные версии операторов, когда `displaystyle` установлено на `true`. Смотрите также `largeop` и `movablelimits` на `<mo> (en-US)`.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона (если изображение имеет прозрачность). Вы можете использовать `#rgb`, `#rrggbb` и имена цветов HTML.

mathcolor

Цвет текста. Вы можете использовать `#rgb`, `#rrggbb` и имена цветов HTML.

mathsize

 Размер контента. Смотрите length для возможных значений.
 Устаревшие значения: `small`, `normal` и `big`. Они будут удалены в будущем.

mathvariant

Этот атрибут определяет логический класс числа, который варьируется в типографике.То есть, хотя имена предполагают типографский стиль для класса, семантически, элементы с одним и тем же классом обрабатываются «одинаково» в выражении, которое может включать или не включать отображение их с именованной типографикой. Допускаются следующие значения:

* `normal` (значение по умолчанию) ;

Пример
* `bold` ;

**Пример**
* `italic` ; *Пример*
* `bold-italic` ;

***Пример***

* `double-struck` ;

Пример
* `bold-fraktur` ;

Пример
* `script` ;

Пример
* `bold-script` ;

Пример
* `fraktur` ;

Пример

* `sans-serif` ;

Пример
* `bold-sans-serif` ;

**Пример**
* `sans-serif-italic` ;

*Пример*
* `sans-serif-bold-italic` ;

***Пример***
* `monospace` ;

Пример

* `initial` ;

مثال
* `tailed` ;

مثال
* `looped` ;

مثال
* `stretched` ;

مثال

Примеры
-------

```html
<math>
  <mn> 0 </mn>

  <mn> 1.337 </mn>

  <mn> twelve </mn>

  <mn> XVI </mn>

  <mn> 2e10 </mn>
</math>
```

Спецификации
------------

| Specification |
| --- |
| MathML Core # number-mn |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mfenced> - MathML

<mfenced>
=========

Элемент MathML `<mfenced>` обеспечивает возможность добавить по выбору открывающие и закрывающие скобки (например, квадратные) и разделители (например, запятую или точку с запятой)

Атрибуты
--------

class, id, style

Предполагается использование с таблицами стилей.

close

Строка для закрывающего разделителя. Значением по умолчанию является `")"` и все пробелы обрезаются.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона. Вы можете использовать `#rgb`, `#rrggbb` и имена цветов HTML (en-US).

mathcolor

Цвет текста и также цвет линии дроби. Вы можете использовать `#rgb`, `#rrggbb` и имена цветов HTML (en-US).

open

Строка для открывающего разделителя. Значением по умолчанию является `"("` и все пробелы обрезаются.

separators

A sequence of zero or more characters to be used for different separators, optionally divided by white space, which is ignored. The default value is ",". By specifying more than one character, it is possible to set different separators for each argument in the expression. If there are too many separators, all excess is ignored. If there are too few separators in the expression, the last specified separator is repeated.

Examples
--------

### The last separator is repeated (`,`)

Sample rendering:
 ![{a;b;c,d,e}](/files/3193/mfenced01.png)

Rendering in your browser:

a
b
c
d
e

```html
<math>
  <mfenced open="{" close="}" separators=";;,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

### All excess is ignored (`,`)

Sample rendering:
 ![[a|b|c|d|e]](/files/3195/mfenced02.png)

Rendering in your browser:

a
b
c
d
e

```html
<math>
  <mfenced open="[" close="]" separators="||||,">
    <mi>a</mi>
    <mi>b</mi>
    <mi>c</mi>
    <mi>d</mi>
    <mi>e</mi>
  </mfenced>
</math>
```

Спецификации
------------

#### No specification found

No specification data found for `mathml.elements.mfenced`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<menclose> - MathML

<menclose>
==========

Элемент MathML `<menclose>` отображает своё содержимое во вложенной нотации, указанной атрибутом `нотации`.

Атрибуты
--------

class, id, style

Используются с таблицами стилей.

href

Используется для установки гиперссылки на указанный URI.

mathbackground

Цвет фона. Вы можете использовать `#rgb`, `#rrggbb` и HTML-имена цветов (en-US).

mathcolor

Цвет текста. Вы можете использовать `#rgb`, `#rrggbb` и HTML-имена цветов (en-US).

notation

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

| Значение | Пример рендеринга | Рендеринг в вашем браузере | Описание |
| --- | --- | --- | --- |
| `longdiv` (default) | longdiv |

a
2

+

b
2

 | длинный символ деления |
| `actuarial` | actuarial |

a
2

+

b
2

 | актуарный символ |
| `radical` | radical |

a
2

+

b
2

 | символ квадратного корня |
| `box` | box |

a
2

+

b
2

 | прямоугольник |
| `roundedbox` | roundedbox |

a
2

+

b
2

 | прямоугольник с закруглёнными вершинами |
| `circle` | circle |

a
2

+

b
2

 | овал |
| `left` | left |

a
2

+

b
2

 | линия слева от содержимого |
| `right` | right |

a
2

+

b
2

 | линия справа от содержимого |
| `top` | top |

a
2

+

b
2

 | линия над содержимым |
| `bottom` | bottom |

a
2

+

b
2

 | линия под содержимым |
| `updiagonalstrike` | updiagonalstrike |

a
2

+

b
2

 | линия, перечёркивающая содержимое от левого низа до правого верха |
| `downdiagonalstrike` | downdiagonalstrike |

a
2

+

b
2

 | линия, перечёркивающая содержимое от левого верха до правого низа |
| `verticalstrike` | verticalstrike |

a
2

+

b
2

 | вертикальная линия, зачёркивающая содержимое |
| `horizontalstrike` | horizontalstrike |

a
2

+

b
2

 | горизонтальная линия, зачёркивающая содержимое |
| `madruwb` | madruwb |

a
2

+

b
2

 | Арабский символ факториала |
| `updiagonalarrow` |  |

a
2

+

b
2

 | диагональная стрелка |
| `phasorangle` | Screenshot of the phasorangle notation |

a
2

+

b
2

 | угол |

Примеры
-------

```html
<math>
  <menclose notation="circle box">
    <mi> x </mi>
    <mo> + </mo>
    <mi> y </mi>
  </menclose>
</math>
```

Спецификации
------------

#### No specification found

No specification data found for `mathml.elements.menclose`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


SVG как изображение - SVG

SVG как изображение
===================

Изображения SVG могут использоваться как формат изображения в ряде контекстов. Многие браузеры поддерживают изображения SVG:

* Элементы HTML `<img>` или `<svg>`
* CSS `background-image`
Гекко-специфические контексты
-----------------------------

Кроме того, Gecko 2.0 представил поддержку использования SVG (en-US) в следующих контекстах:

* CSS `list-style-image`
* CSS `content`
* Элементы SVG `<image>`
* Элементы SVG `<feImage>` (en-US)
* Функция Canvas `drawImage`
### Ограничения

В целях безопасности, Gecko накладывает некоторые ограничения на контент SVG, когда он используется в качестве изображения:

* JavaScript отключён.
* Внешние ресурсы (например, изображения, таблицы стилей) не могут быть загружены, хотя их можно использовать, если они встроены в данные: URI.
* `:visited`-стили ссылок не отображаются.
* Стилизация виджитов на платформе (основанная на теме ОС) отключена.

Обратите внимание, что вышеуказанные ограничения являются специфическими для контекстов изображения; они не применяются, когда содержимое SVG просматривается напрямую или когда оно внедрено в виде документа с помощью встраивания элементов `<iframe>` (en-US), `<object>` (en-US), или `<embed>`.

Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |

Смотрите также
--------------

* SVG в HTML. Введение


Применение эффектов SVG к содержимому HTML - SVG

Применение эффектов SVG к содержимому HTML
==========================================

Современные браузеры поддерживают SVG (en-US) в стилях CSS для применения графических эффектов к HTML-контенту.

Вы можете указать SVG в стилях как внутри одного документа, так и из внешней таблицы стилей. Есть 3 свойства, которые вы можете использовать: `mask` (en-US), `clip-path`, и `filter`.

**Примечание:** Ссылки на SVG во внешних файлах должны быть в том же самом источнике same origin , что и ссылочный документ.

Использование встроенного SVG
-----------------------------

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

```html
<style>
 p {
 mask: url(#my-mask);
 }
</style>
```

В приведённом выше примере все параграфы маскируются с помощью SVG (en-US) `<mask>` (en-US) с ID `my-mask`.

### Пример: маскировка

Например, вы можете сделать градиентную маску для содержимого HTML, используя код SVG и CSS, похожий на следующий, внутри вашего документа HTML:

```html
<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>
```

```css
.target {
  mask: url(#mask-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

Обратите внимание, что в CSS маска указана с использованием URL-адреса ID- `#mask-1`, которая является идентификатором маски SVG, указанной ниже. Все остальное указывает подробности о самой маске градиента.

Применение SVG-эффекта к (X) HTML выполняется путём назначения `target` классу, определённому выше элементу, например:

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  Ut enim ad minim veniam.
</p>
```

Вышеприведённый пример будет отображаться с помощью маски, применяемой к нему.

### Пример: обрезание

Этот пример демонстрирует использование SVG для клипа содержимого HTML. Обратите внимание, что даже кликаемые области для ссылок обрезаются.

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  Ut enim ad minim veniam.
</p>

<button onclick="toggleRadius()">Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>
```

```css
.target {
  clip-path: url(#clipping-path-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

Это устанавливает область отсечения, образованную из круга и прямоугольника, присваивает ему ID `#clipping-path-1`, а затем ссылается на него в CSS. Путь клипа может быть назначен любому элементу с `target` классом.

Вы можете вносить изменения в SVG в реальном времени, и они сразу же повлияют на рендеринг HTML. Например, вы можете изменить размер круга в указанном выше пути клипа:

```js
function toggleRadius() {
  var circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
```

### Пример: Фильтрация

Это демонстрирует применение фильтра к содержимому HTML с помощью SVG. Он устанавливает несколько фильтров, которые применяются с CSS к трём элементам как в нормальном состоянии, так и при hover мыши.

```html
<p class="target" style="background: lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <b class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</b
 >
  Ut enim ad minim veniam.
</p>
```

Любой SVG-фильтр может применяться таким образом. Например, чтобы применить эффект размытия, вы можете использовать:

```html
<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>
```

Вы также можете применить цветовую матрицу:

```html
<svg height="0">
  <filter id="f2">
    <feColorMatrix
 values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0 0 0 1 0" />
  </filter>
</svg>
```

И ещё несколько фильтров:

```html
<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
 filterRes="100 100"
 style="color-interpolation-filters:sRGB"
 order="3"
 kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
 preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
 surfaceScale="5"
 specularConstant="1"
 specularExponent="10"
 lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
 values="1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 1 0 0 0"
 style="color-interpolation-filters:sRGB" />
  </filter>
</svg>
```

Пять фильтров применяются с использованием следующего CSS:

```css
p.target {
  filter: url(#f3);
}
p.target:hover {
  filter: url(#f5);
}
b.target {
  filter: url(#f1);
}
b.target:hover {
  filter: url(#f4);
}
pre.target {
  filter: url(#f2);
}
pre.target:hover {
  filter: url(#f3);
}
```

### Пример: размытый текст

Чтобы размыть текст, браузеры, основанные на Webkit, имеют (префиксный) CSS-фильтр, называемый blur (см. Также CSS filter). Вы можете добиться такого же эффекта, используя фильтры SVG.

```html
<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>
```

Вы можете применить SVG и CSS-фильтр в том же классе:

```css
.blur {
  filter: url(#wherearemyglasses);
}
```

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

### Пример: текстовые эффекты

Эффекты SVG также могут использоваться для большей динамики и гибкого подхода к добавлению текста по сравнению с простым текстом HTML.

Создавая текст с использованием элементов SVG в сочетании с HTML, достигаются различные текстовые эффекты. Можно повернуть текст:

```html
<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Пример текста
  </text>
</svg>
```

Использование внешних ссылок
----------------------------

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

 For example, if your CSS is in a file namedit can look like this:
 Например, если ваш CSS находится в файле с именем `default.css`, он может выглядеть следующим образом:

```css
.target {
  clip-path: url(resources.svg#c1);
}
```

Затем SVG импортируется из файла с именем `resources.svg`, используя путь клипа с ID `c1`.

Смотрите также
--------------

* SVG (en-US)
* Эффекты SVG для HTML-контента (запись в блоге)
* Web Tech Blog »Архив блога» Ссылки на внешние документы SVG)


Справочник SVG атрибутов - SVG

Справочник SVG атрибутов
========================

« SVG / Справочник SVG элементов »

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

SVG Атрибуты от А до Я
----------------------

### A

* `accent-height (en-US)`
* `accumulate (en-US)`
* `additive`
* `alignment-baseline (en-US)`
* `allowReorder`
* `alphabetic (en-US)`
* `amplitude (en-US)`
* `arabic-form (en-US)`
* `ascent (en-US)`
* `attributeName`
* `attributeType`
* `azimuth (en-US)`
### B

* `baseFrequency (en-US)`
* `baseline-shift (en-US)`
* `baseProfile (en-US)`
* `bbox (en-US)`
* `begin (en-US)`
* `bias (en-US)`
* `by (en-US)`
### C

* `calcMode (en-US)`
* `cap-height (en-US)`
* `class`
* `clip (en-US)`
* `clipPathUnits (en-US)`
* `clip-path (en-US)`
* `clip-rule (en-US)`
* `color (en-US)`
* `color-interpolation (en-US)`
* `color-interpolation-filters (en-US)`
* `color-profile (en-US)`
* `color-rendering`
* `contentScriptType`
* `contentStyleType`
* `cursor (en-US)`
* `cx`
* `cy`
### D

* `d`
* `descent (en-US)`
* `diffuseConstant (en-US)`
* `direction (en-US)`
* `display (en-US)`
* `divisor (en-US)`
* `dominant-baseline (en-US)`
* `dur`
* `dx (en-US)`
* `dy (en-US)`
### E

* `edgeMode (en-US)`
* `elevation (en-US)`
* `enable-background (en-US)`
* `end`
* `exponent (en-US)`
* `externalResourcesRequired`
### F

* `fill`
* `fill-opacity`
* `fill-rule`
* `filter (en-US)`
* `filterRes`
* `filterUnits (en-US)`
* `flood-color (en-US)`
* `flood-opacity (en-US)`
* `font-family (en-US)`
* `font-size (en-US)`
* `font-size-adjust (en-US)`
* `font-stretch (en-US)`
* `font-style (en-US)`
* `font-variant (en-US)`
* `font-weight`
* `format`
* `from (en-US)`
* `fx (en-US)`
* `fy (en-US)`
### G

* `g1 (en-US)`
* `g2 (en-US)`
* `glyph-name (en-US)`
* `glyph-orientation-horizontal (en-US)`
* `glyph-orientation-vertical (en-US)`
* `glyphRef`
* `gradientTransform (en-US)`
* `gradientUnits (en-US)`
### H

* `hanging (en-US)`
* `height (en-US)`
* `horiz-adv-x (en-US)`
* `horiz-origin-x (en-US)`
### I

* `id`
* `ideographic (en-US)`
* `image-rendering (en-US)`
* `in (en-US)`
* `in2 (en-US)`
* `intercept (en-US)`
### K

* `k (en-US)`
* `k1 (en-US)`
* `k2 (en-US)`
* `k3 (en-US)`
* `k4 (en-US)`
* `kernelMatrix (en-US)`
* `kernelUnitLength (en-US)`
* `kerning (en-US)`
* `keyPoints (en-US)`
* `keySplines (en-US)`
* `keyTimes`
### L

* `lang`
* `lengthAdjust`
* `letter-spacing`
* `lighting-color`
* `limitingConeAngle (en-US)`
* `local`
### M

* `marker-end (en-US)`
* `marker-mid (en-US)`
* `marker-start (en-US)`
* `markerHeight (en-US)`
* `markerUnits (en-US)`
* `markerWidth (en-US)`
* `mask (en-US)`
* `maskContentUnits (en-US)`
* `maskUnits (en-US)`
* `mathematical (en-US)`
* `max (en-US)`
* `media (en-US)`
* `method (en-US)`
* `min (en-US)`
* `mode (en-US)`
### N

* `name (en-US)`
* `numOctaves (en-US)`
### O

* `offset`
* `onabort`
* `onactivate`
* `onbegin`
* `onclick (en-US)`
* `onend`
* `onerror`
* `onfocusin`
* `onfocusout`
* `onload`
* `onmousedown`
* `onmousemove`
* `onmouseout`
* `onmouseover`
* `onmouseup`
* `onrepeat`
* `onresize`
* `onscroll`
* `onunload`
* `onzoom`
* `opacity (en-US)`
* `operator (en-US)`
* `order (en-US)`
* `orient (en-US)`
* `orientation (en-US)`
* `origin (en-US)`
* `overflow`
* `overline-position (en-US)`
* `overline-thickness (en-US)`
### P

* `panose-1 (en-US)`
* `paint-order (en-US)`
* `path (en-US)`
* `pathLength (en-US)`
* `patternContentUnits`
* `patternTransform (en-US)`
* `patternUnits (en-US)`
* `pointer-events (en-US)`
* `points (en-US)`
* `pointsAtX (en-US)`
* `pointsAtY (en-US)`
* `pointsAtZ (en-US)`
* `preserveAlpha (en-US)`
* `preserveAspectRatio (en-US)`
* `primitiveUnits (en-US)`
### R

* `r`
* `radius (en-US)`
* `refX (en-US)`
* `refY (en-US)`
* `rendering-intent`
* `repeatCount`
* `repeatDur (en-US)`
* `requiredExtensions`
* `requiredFeatures (en-US)`
* `restart (en-US)`
* `result (en-US)`
* `rotate (en-US)`
* `rx`
* `ry`
### S

* `scale (en-US)`
* `seed (en-US)`
* `shape-rendering`
* `slope (en-US)`
* `spacing (en-US)`
* `specularConstant (en-US)`
* `specularExponent (en-US)`
* `spreadMethod (en-US)`
* `startOffset (en-US)`
* `stdDeviation (en-US)`
* `stemh (en-US)`
* `stemv (en-US)`
* `stitchTiles (en-US)`
* `stop-color`
* `stop-opacity (en-US)`
* `strikethrough-position (en-US)`
* `strikethrough-thickness (en-US)`
* `string (en-US)`
* `stroke`
* `stroke-dasharray (en-US)`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin (en-US)`
* `stroke-miterlimit (en-US)`
* `stroke-opacity (en-US)`
* `stroke-width`
* `style (en-US)`
* `surfaceScale (en-US)`
* `systemLanguage (en-US)`
### T

* `tableValues (en-US)`
* `target (en-US)`
* `targetX (en-US)`
* `targetY (en-US)`
* `text-anchor`
* `text-decoration (en-US)`
* `text-rendering`
* `textLength (en-US)`
* `to (en-US)`
* `transform`
* `type (en-US)`
### U

* `u1 (en-US)`
* `u2 (en-US)`
* `underline-position (en-US)`
* `underline-thickness (en-US)`
* `unicode (en-US)`
* `unicode-bidi (en-US)`
* `unicode-range (en-US)`
* `units-per-em (en-US)`
### V

* `v-alphabetic (en-US)`
* `v-hanging (en-US)`
* `v-ideographic (en-US)`
* `v-mathematical (en-US)`
* `values`
* `version (en-US)`
* `vert-adv-y (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `viewBox`
* `viewTarget`
* `visibility (en-US)`
### W

* `width`
* `widths (en-US)`
* `word-spacing (en-US)`
* `writing-mode (en-US)`
### X

* `x`
* `x-height (en-US)`
* `x1 (en-US)`
* `x2 (en-US)`
* `xChannelSelector (en-US)`
* `xlink:actuate`
* `xlink:arcrole (en-US)`
* `xlink:href (en-US)`
* `xlink:role`
* `xlink:show (en-US)`
* `xlink:title (en-US)`
* `xlink:type (en-US)`
* `xml:base (en-US)`
* `xml:lang (en-US)`
* `xml:space`
### Y

* `y`
* `y1 (en-US)`
* `y2 (en-US)`
* `yChannelSelector (en-US)`
### Z

* `z (en-US)`
* `zoomAndPan (en-US)`
Категории
---------

### Атрибуты событий анимации

`onbegin`, `onend`, `onload`, `onrepeat`### Целевые атрибуты анимации

`attributeType`, `attributeName`### Атрибуты времени анимации

`begin (en-US)`, `dur`, `end`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount`, `repeatDur (en-US)`, `fill`### Атрибуты значений анимации

`calcMode (en-US)`, `values`, `keyTimes`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`### Атрибуты добавления анимации

`additive`, `accumulate (en-US)`### Атрибуты условий

`requiredExtensions`, `requiredFeatures (en-US)`, `systemLanguage (en-US)`.

### Атрибуты ядра

`id`, `xml:base (en-US)`, `xml:lang (en-US)`, `xml:space`### Атрибуты событий документа

`onabort`, `onerror`, `onresize`, `onscroll`, `onunload`, `onzoom`### Атрибуты простых фильтров

`height (en-US)`, `result (en-US)`, `width`, `x`, `y`### Атрибуты графических событий

`onactivate`, `onclick (en-US)`, `onfocusin`, `onfocusout`, `onload`, `onmousedown`, `onmousemove`, `onmouseout`, `onmouseover`, `onmouseup`### Атрибуты представления

**Примечание:** Заметьте, что все атрибуты представления SVG можно использовать как CSS-свойства.

`alignment-baseline (en-US)`, `baseline-shift (en-US)`, `clip (en-US)`, `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-interpolation-filters (en-US)`, `color-profile (en-US)`, `color-rendering`, `cursor (en-US)`, `direction (en-US)`, `display (en-US)`, `dominant-baseline (en-US)`, `enable-background (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `flood-color (en-US)`, `flood-opacity (en-US)`, `font-family (en-US)`, `font-size (en-US)`, `font-size-adjust (en-US)`, `font-stretch (en-US)`, `font-style (en-US)`, `font-variant (en-US)`, `font-weight`, `glyph-orientation-horizontal (en-US)`, `glyph-orientation-vertical (en-US)`, `image-rendering (en-US)`, `kerning (en-US)`, `letter-spacing`, `lighting-color`, `marker-end (en-US)`, `marker-mid (en-US)`, `marker-start (en-US)`, `mask (en-US)`, `opacity (en-US)`, `overflow`, `pointer-events (en-US)`, `shape-rendering`, `stop-color`, `stop-opacity (en-US)`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `text-anchor`, `text-decoration (en-US)`, `text-rendering`, `unicode-bidi (en-US)`, `visibility (en-US)`, `word-spacing (en-US)`, `writing-mode (en-US)`### Атрибуты передаточных функций

`type (en-US)`, `tableValues (en-US)`, `slope (en-US)`, `intercept (en-US)`, `amplitude (en-US)`, `exponent (en-US)`, `offset`### XLink атрибуты

`xlink:href (en-US)`, `xlink:type (en-US)`, `xlink:role`, `xlink:arcrole (en-US)`, `xlink:title (en-US)`, `xlink:show (en-US)`, `xlink:actuate`


Справочник SVG элементов - SVG

Справочник SVG элементов
========================

« SVG / Справочник SVG атрибутов »

SVG элементы
------------

A

* `<a>`
* `<altGlyph>`
* `<altGlyphDef>`
* `<altGlyphItem>`
* `<animate>`
* `<animateColor>` (en-US)
* `<animateMotion>`
* `<animateTransform>` (en-US)

B C

* `<circle>`
* `<clipPath>` (en-US)
* `<color-profile>`
* `<cursor>` (en-US)

D

* `<defs>`
* `<desc>` (en-US)
* `<discard>`

E

* `<ellipse>`

F

* `<feBlend>`
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDistantLight>` (en-US)
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<font>` (en-US)
* `<font-face>` (en-US)
* `<font-face-format>` (en-US)
* `<font-face-name>` (en-US)
* `<font-face-src>` (en-US)
* `<font-face-uri>` (en-US)
* `<foreignObject>`

G

* `<g>`
* `<glyph>` (en-US)
* `<glyphRef>` (en-US)

H

* `<hatch>`
* `<hatchpath>`
* `<hkern>` (en-US)

I

* `<image>`

J K L

* `<line>`
* `<linearGradient>`

M

* `<marker>` (en-US)
* `<mask>` (en-US)
* `<mesh>`
* `<meshgradient>`
* `<meshpatch>`
* `<meshrow>`
* `<metadata>` (en-US)
* `<missing-glyph>` (en-US)
* `<mpath>` (en-US)

N O P

* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>` (en-US)

Q R

* `<radialGradient>`
* `<rect>`

S

* `<script>` (en-US)
* `<set>` (en-US)
* `<solidcolor>`
* `<stop>` (en-US)
* `<style>` (en-US)
* `<svg>`
* `<switch>` (en-US)
* `<symbol>` (en-US)

T

* `<text>`
* `<textPath>` (en-US)
* `<title>` (en-US)
* `<tref>` (en-US)
* `<tspan>` (en-US)

U

* `<unknown>`
* `<use>`

V — Z

* `<view>` (en-US)
* `<vkern>` (en-US)
Элементы SVG по категориям
--------------------------

### Элементы анимации

`<animate>`, `<animateColor>` (en-US), `<animateMotion>`, `<animateTransform>` (en-US), `<discard>`, `<mpath>` (en-US), `<set>` (en-US)### Базовые фигуры

`<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>` (en-US), `<rect>`### Контейнеры

`<a>`, `<defs>`, `<glyph>` (en-US), `<g>`, `<marker>` (en-US), `<mask>` (en-US), `<missing-glyph>` (en-US), `<pattern>`, `<svg>`, `<switch>` (en-US), `<symbol>` (en-US), `<unknown>`### Элементы описания

`<desc>` (en-US), `<metadata>` (en-US), `<title>` (en-US)### Фильтры

`<feBlend>`, `<feColorMatrix>` (en-US), `<feComponentTransfer>` (en-US), `<feComposite>` (en-US), `<feConvolveMatrix>` (en-US), `<feDiffuseLighting>` (en-US), `<feDisplacementMap>` (en-US), `<feDropShadow>` (en-US), `<feFlood>` (en-US),`<feFuncA>` (en-US), `<feFuncB>` (en-US), `<feFuncG>` (en-US), `<feFuncR>` (en-US),`<feGaussianBlur>` (en-US), `<feImage>` (en-US), `<feMerge>` (en-US), `<feMergeNode>` (en-US), `<feMorphology>` (en-US), `<feOffset>` (en-US), `<feSpecularLighting>` (en-US), `<feTile>` (en-US), `<feTurbulence>` (en-US)### Элементы шрифта

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US), `<hkern>` (en-US), `<vkern>` (en-US)### Градиентные элементы

`<linearGradient>`, `<meshgradient>`, `<radialGradient>`, `<stop>` (en-US)### Графические элементы

`<circle>`, `<ellipse>`, `<image>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>` (en-US), `<rect>`, `<text>`, `<use>`### Элементы ссылки на графику

`<mesh>`, `<use>`### Источники света

`<feDistantLight>` (en-US), `<fePointLight>` (en-US), `<feSpotLight>` (en-US)### Непрозрачные элементы

`<clipPath>` (en-US), `<defs>`, `<hatch>`, `<linearGradient>`, `<marker>` (en-US), `<mask>` (en-US), `<meshgradient>`, `<metadata>` (en-US), `<pattern>`, `<radialGradient>`, `<script>` (en-US), `<style>` (en-US), `<symbol>` (en-US), `<title>` (en-US)### Элементы сервера печати

`<hatch>`, `<linearGradient>`, `<meshgradient>`, `<pattern>`, `<radialGradient>`, `<solidcolor>`### Отличительные элементы

`<a>`, `<circle>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>` (en-US), `<rect>`, `<svg>`, `<switch>` (en-US), `<symbol>` (en-US), `<text>`, `<textPath>` (en-US), `<tspan>` (en-US), `<unknown>`, `<use>`### Элементы формы

`<circle>`, `<ellipse>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>` (en-US), `<rect>`### Структурные элементы

`<defs>`, `<g>`, `<svg>`, `<symbol>` (en-US), `<use>`### Элементы текстового контента

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<glyph>` (en-US), `<glyphRef>` (en-US), `<textPath>` (en-US), `<text>`, `<tref>` (en-US), `<tspan>` (en-US)### Текстовые контентные дочерние элементы

`<altGlyph>`, `<textPath>` (en-US), `<tref>` (en-US), `<tspan>` (en-US)### Некатегоризированные элементы

`<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<foreignObject>`, `<hatchpath>`, `<meshpatch>`, `<meshrow>`, `<script>` (en-US), `<style>` (en-US), `<view>` (en-US)Смотрите также
--------------

* Ссылка на атрибут SVG
* Учебник SVG
* Ссылка на интерфейс SVG


SVG — учебное руководство - SVG

SVG — учебное руководство
=========================

Масштабируемая векторная графика (SVG), — это подмножество расширяемого языка разметки XML созданный Консорциумом Всемирной паутины (W3C). Эта технология реализована в Firefox, Opera, Internet Explorer, WebKit и в прочих браузерах.

Это учебное пособие призвано объяснить вам суть технологии SVG и ознакомить с её техническими деталями. Если вы хотите только рисовать красивые изображения, то вы можете найти более полезные учебные ресурсы. Есть хорошее учебное пособие для знакомства с SVG — это учебное пособие от W3C SVG Primer.

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

##### Введение в SVG

* Введение
* Начало работы
* Расположение(Позиция)
* Основные фигуры
* Пути(Paths)
* Заливка и обводка
* Градиенты
* Паттерны(Шаблоны)
* Текст
* Базовые трансформации
* Обрезка и маска
* Другой контент в SVG
* Фильтры
* SVG-шрифты
* SVG-тег Image
* Инструменты для SVG
* SVG и CSS

Следующие темы более обширные, и они требуют отдельных учебных пособий.

##### Написание SVG с JavaScript

БОП

##### SVG-фильтры — руководство

БОП

##### Анимация с помощью SMIL в SVG

БОП

##### Создание шрифтов в SVG

БОП


<image> - SVG

<image>
=======

Элемент <image> позволяет включить растровые изображения в SVG документ.

Usage context
-------------

|  |  |
| --- | --- |
| Категории | Графические элементы, Элементы графики |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

Атрибуты
--------

### Глобальные атрибуты

* Conditional processing attributes »
* Core attributes »
* Graphical event attributes »
* Xlink attributes »
* Presentation attributes »
* `class`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Специфичные атрибуты

* `x`
* `y`
* `width`
* `height (en-US)`
* `xlink:href (en-US)`
* `preserveAspectRatio (en-US)`
DOM Interface
-------------

This element implements the `SVGImageElement` (en-US) interface.

Пример
------

Базовый рендеринг PNG изображения в качестве объекта SVG:

### SVG

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn\_logo\_only\_color.png" height="200" width="200" />
</svg>
```

### Результат

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ImageElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<g> - SVG

<g>
===

Элемент g используется для группировки других SVG элементов. Любые преобразования применяемые к g элементу наследуются его дочерними элементами. Также g используется для группировки различных элементов, чтобы позднее можно было сослаться на них с помощью `<use>`.

Контекст использования
----------------------

|  |  |
| --- | --- |
| Категории | Элемент-контейнер, Структурный элемент |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описанияЭлементы фигурыСтруктурные элементыЭлементы градиента`<a>`, `<clipPath>` (en-US), `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<font>` (en-US), `<font-face>` (en-US), `<foreignObject>`, `<image>`, `<marker>` (en-US), `<mask>` (en-US), `<pattern>`, `<script>` (en-US), `<style>` (en-US), `<switch>` (en-US), `<text>`, `<view>` (en-US) |

Пример
------

```html
<svg viewBox="0 0 95 50" xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>
```

Атрибуты
--------

### Глобальные атрибуты

* Conditional processing attributes (en-US) »
* Core attributes (en-US) »
* Graphical event attributes (en-US) »
* Presentation attributes (en-US) »
* `class`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Специфичные атрибуты

*Нет специфичных атрибутов.*

Интерфейс DOM
-------------

Этот элемент реализует `SVGGElement` (en-US) интерес.

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # GElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<use>`
* `<defs>`
* `<symbol>` (en-US)
* SVG элемент g


<polygon> - SVG

<polygon>
=========

Элемент **`<polygon>`** описывает замкнутую фигуру, состоящую из набора последовательно соединённых между собой прямых линий. Для создания незамкнутых фигур используется элемент `<polyline>` (en-US).

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Example of a polygon with the default fill -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- Example of the same polygon shape with stroke and no fill -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

Атрибуты
--------

`points (en-US)`

 Данный атрибут определяет список точек (независимых пар x,y координат), необходимых для отрисовки фигуры.
 *Тип значения*: **<number>**+ ; *Значение по умолчанию*: `""`; *Анимируемый*: **да**

`pathLength (en-US)`

 Данный атрибут позволяет указывать общую длину пути в пользовательских единицах.
 *Тип значения*: **<number>** ; *Значение по умолчанию*: *none*; *Анимируемый*: **да**

### Global attributes

Основные атрибуты

Самые важные: `id`, `tabindex (en-US)`

Атрибуты стилизации
`class`, `style (en-US)`
Условные атрибуты

Самые важные: `requiredExtensions`, `systemLanguage (en-US)`

Атрибуты событий

Атрибуты глобальных событий, Атрибуты графических событий

Presentation Attributes

Most notably: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA-атрибуты

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

Usage notes
-----------

|  |  |
| --- | --- |
| Категории | Элементы базовых фигур, Графические элементы, Элемент фигуры |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы анимацииЭлементы описания |

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Другие базовые фигуры SVG: `<circle>`, `<ellipse>`, `<line>`, **`<polyline>` (en-US)**, **`<rect>`**


<feBlend> - SVG

<feBlend>
=========

SVG фильтр примитивна **`<feBlend>`** объединяет два объекта, управляемых определённым режимом смешивания. Это похоже на работу программного обеспечения для редактирования изображений при смешивании двух слоёв. Режим определяется атрибутом `mode (en-US)`.

Используемый контекст
---------------------

|  |  |
| --- | --- |
| Категории | Элемент простого фильтра |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:`<animate>`, `<set>` (en-US) |

Атрибуты
--------

### Глобальные атрибуты

* Core attributes
* Presentation attributes
* Filter primitive attributes
* `class`
* `style (en-US)`
### Специальные атрибуты

* `in (en-US)`
* `in2 (en-US)`
* `mode (en-US)`
DOM Interface
-------------

Этот элемент реализует интерфейс `SVGFEBlendElement` (en-US).

Пример
------

### SVG

```html
<svg
 width="200"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feFlood
 result="floodFill"
 x="0"
 y="0"
 width="100%"
 height="100%"
 flood-color="green"
 flood-opacity="1" />
      <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
    </filter>
  </defs>

  <image
 xlink:href="//developer.mozilla.org/files/6457/mdn\_logo\_only\_color.png"
 x="10%"
 y="10%"
 width="80%"
 height="80%"
 style="filter:url(#spotlight);" />
</svg>
```

### Результат

Спецификации
------------

| Specification |
| --- |
| Filter Effects Module Level 1 # feBlendElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<filter>` (en-US)
* `<animate>`
* `<set>` (en-US)
* `<feColorMatrix>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feFlood>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMorphology>` (en-US)
* `<feOffset>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* SVG tutorial: Filter effects


<animate> - SVG

<animate>
=========

Тег <animate> может быть помещён внутри какой-то фигуры, например, <circle> . Он задаёт анимацию атрибута фигуры. Указанный атрибут будет изменяться со стартового значения и до конечного значения с определённым интервалом.

Использование
-------------

|  |  |
| --- | --- |
| Категории | Элемент анимации |
| Разрешённый контент | Любое количество следующих элементов, в любом порядке:Элементы описания |

Пример
------

» animate.svg

Атрибуты
--------

### Глобальные атрибуты

* Conditional processing attributes »
* Core attributes »
* Animation event attributes »
* Xlink attributes »
* Animation attribute target attributes »
* Animation timing attributes »
* Animation value attributes »
* Animation addition attributes »
* `externalResourcesRequired`
### Атрибуты элемента

* `attributeName`
* `attributeType`
* `from (en-US)`
* `to (en-US)`
* `dur`
* `repeatCount`
DOM интерфейс
-------------

Элемент реализует `SVGAnimateElement` интерфейс .

Спецификации
------------

| Specification |
| --- |
| SVG Animations Level 2 # AnimateElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<line> - SVG

<line>
======

Элемент **`<line>`** одна из базовых фигур SVG, используемая для создания линии, связывающей две точки.

Пример
------
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- Если вы не укажете цвет контура,
 линия не будет видна -->
</svg>
```

Атрибуты
--------

`x1 (en-US)`

 Определяет координату начальной точки линии по оси x .
 *Тип значения:* **<length>**|**<percentage>**|**<number>** ; *Значение по умолчанию*: `0`; А*неминуемый*: **да**

`x2 (en-US)`

 Определяет координату конечной точки линии по оси x.
 *Тип значения*: **<length>**|**<percentage>**|**<number>** ; *Значение по умолчанию*: `0`; А*неминуемый*: **да**

`y1 (en-US)`

 Определяет координату начальной точки линии по оси y.
 *Тип значения*: **<length>**|**<percentage>**|**<number>** ; *Значение по умолчанию*: `0`; А*неминуемый*: **да**

`y2 (en-US)`

 Определяет координату конечной точки линии по оси y.
 *Тип значения*: **<length>**|**<percentage>**|**<number>** ; *Значение по умолчанию*: `0`; А*неминуемый*: **да**

`pathLength (en-US)`

 Определяет общую длину пути в пользовательских единицах.
 *Тип значения*: **<number>** ; *Значение по умолчанию*: *none*; А*неминуемый*: **да**

### Глобальные атрибуты

Основные атрибуты

В первую очередь: `id`, `tabindex (en-US)`

Атрибуты оформления (стилей)
`class`, `style (en-US)`
Атрибуты условной обработки

В первую очередь: `requiredExtensions`, `systemLanguage (en-US)`

Атрибуты события

Глобальные атрибуты события, Графические атрибуты события

Атрибуты презентации

В первую очередь: `clip-path (en-US)`, `clip-rule (en-US)`, `color (en-US)`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering`, `stroke`, `stroke-dasharray (en-US)`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin (en-US)`, `stroke-miterlimit (en-US)`, `stroke-opacity (en-US)`, `stroke-width`, `transform`, `vector-effect (en-US)`, `visibility (en-US)`

ARIA-атрибуты

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

Спецификации
------------

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # LineElement |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<polygon>`
* `<path>`
* SVG Line - описание и примеры


<rect> - SVG

<rect>
======

`<rect>` - это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скруглёнными углами.

Контекст использования
----------------------

| Категория | Простая фигура, Графический элемент |
| --- | --- |
| Разрешённое содержимое | Любое количество указанных элементов в любом порядке: Элементы анимации » Элементы описания » |
| Нормативный документ | SVG 1.1 (2ое издание) |

Пример
------

### Простой пример использования rect

```xml
<?xml version="1.0"?>
<svg width="120" height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="100" height="100"/>
</svg>
```

» rect-1.svg

### `<rect>` со скруглёнными углами

```xml
<?xml version="1.0"?>
<svg width="120" height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10"
 width="100" height="100"
 rx="15" ry="15"/>

</svg>
```

» rect-2.svg

Атрибуты
--------

### Глобальные атрибуты

* Атрибуты условной обработки
* Атрибуты ядра
* Атрибуты графических событий
* Атрибуты представления
* `class`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### Специальные атрибуты

* `x`
* `y`
* `width`
* `height (en-US)`
* `rx`
* `ry`
DOM Интерфейс
-------------

Данный элемент реализует интерфейс `SVGRectElement`.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `<path>`