MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Другое содержание в SVG

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Встраивание растровых изображений

Так же, как элемент img в HTML SVG имеет элемент изображения, служащий той же цели. Вы можете использовать его для встраивания произвольных растровых (и векторных) изображений. Спецификация запрашивает приложения для поддержки файлов формата PNG, JPEG и SVG.

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

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200">
  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
</svg>

ScreenshotLive sample

Внедрение произвольного XML

Поскольку SVG является XML-приложением, вы можете, конечно, всегда вставлять произвольный XML в любом месте документа SVG. Но тогда у вас нет средств для определения того, как окружающий SVG должен реагировать на содержимое. Собственно, в соответствующем обозревателе он совсем не реагирует, данные просто будут опущены.
Поэтому спецификация добавляет элемент <foreignObject> в SVG. Его единственная цель - быть контейнером для другой разметки и носителем для атрибутов стиля SVG (наиболее заметны ширина и высота для определения пространства, которое будет занимать объект).

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

Note: Please keep in mind, that the content of the foreignObject must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.

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

Метки документа и участники

 Внесли вклад в эту страницу: warsan
 Обновлялась последний раз: warsan,