files/ru/web/svg/tutorial/other_content_in_svg/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

---
title: Другое содержание в SVG
slug: Web/SVG/Tutorial/Other_content_in_SVG
tags:
  - SVG
  - 'SVG:Руководство'
translation_of: Web/SVG/Tutorial/Other_content_in_SVG
---
<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>

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

<h3 id="Встраивание_растровых_изображений">Встраивание растровых изображений</h3>

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

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

<pre class="brush: html">&lt;svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="200" height="200"&gt;
  &lt;image x="90" y="-65" width="128" height="146" transform="rotate(45)"
     xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/&gt;
&lt;/svg&gt;</pre>

<p>{{ EmbedLiveSample('Встраивание_растровых_изображений','220','220','/files/16567/rotate-image-demo.png') }}</p>

<h3 id="Внедрение_произвольного_XML">Внедрение произвольного XML</h3>

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

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

<div class="note"><strong>Note:</strong> Please keep in mind, that the content of the <code>foreignObject</code> must be processable by the viewer. A standalone SVG viewer is unlikely to be able to render HTML or MathML.</div>

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

<p>{{ PreviousNext("Web/SVG/Tutorial/Clipping_and_masking", "Web/SVG/Tutorial/Filter_effects") }}</p>