files/zh-cn/web/svg/element/image/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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

---
title: image
slug: Web/SVG/Element/image
tags:
  - SVG
  - SVG图形
  - 元素
  - 参考
translation_of: Web/SVG/Element/image
---
<div>{{SVGRef}}</div>

<p>SVG文档中的SVG元素包含图像信息。它表现为图像文件或者其他SVG文件。</p>

<p>SVG图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确。</p>

<p>SVG文件是这样的一种图像：不被当做外部资源加载，不可以用<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:visited">:visited</a> 样式，不能有交互。使用动态SVG元素，可以用<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use">&lt;use&gt;</a>引入外部的URL。使用SVG文件并添加scripts在里面，可以用<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object">&lt;object&gt;</a> 放在 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject">&lt;foreignObject&gt;</a>中。</p>

<p>注意：HTML规范中定义&lt;image&gt;和&lt;img&gt;在解析时是等效的。这种规范只适用于SVG文件或SVG区块内。</p>

<h2 id="用法">用法</h2>

<p>{{svginfo}}</p>

<h2 id="属性">属性</h2>

<h3 id="全局属性">全局属性</h3>

<ul>
 <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">条件处理属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">核心属性</a> »</li>
 <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">图形事件属性</a> »</li>
 <li><a href="/en/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Xlink属性</a> »</li>
 <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">外观属性</a> »</li>
 <li>{{ SVGAttr("class") }}</li>
 <li>{{ SVGAttr("style") }}</li>
 <li>{{ SVGAttr("externalResourcesRequired") }}</li>
 <li>{{ SVGAttr("transform") }}</li>
</ul>

<h3 id="专有属性">专有属性</h3>

<ul>
 <li>{{ SVGAttr("x") }}：图像水平方向上到原点的距离</li>
 <li>{{ SVGAttr("y") }}：图像竖直方向上到原点的距离</li>
 <li>{{ SVGAttr("width") }}：图像宽度。和HTML的&lt;img&gt;不同，该属性是必须的</li>
 <li>{{ SVGAttr("height") }}：图像高度。和HTML的&lt;img&gt;不同，该属性是必须的</li>
 <li>{{ SVGAttr("xlink:href") }}：图像的URL指向</li>
 <li>{{ SVGAttr("preserveAspectRatio") }}：控制图像比例</li>
</ul>

<h2 id="DOM接口">DOM接口</h2>

<p>该元素实现<code><a href="/en/DOM/SVGImageElement" title="en/DOM/SVGImageElement">SVGImageElement</a></code> 接口。</p>

<h2 id="示例">示例</h2>

<p>在SVG对象中基本呈现PNG图像:</p>

<pre class="brush: html">&lt;svg width="100%" height="100%" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;image xlink:href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100" /&gt;
&lt;/svg&gt;
</pre>

<p>{{EmbedLiveSample("Example", 250, 260)}}</p>

<h2 id="说明">说明</h2>

<table>
 <thead>
  <tr>
   <th scope="col">版本</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('SVG2', 'embedded.html#ImageElement', '&lt;image&gt;')}}</td>
   <td>{{Spec2('SVG2')}} 候选推荐</td>
   <td>允许省略高度和宽度</td>
  </tr>
  <tr>
   <td>{{SpecName('SVG1.1', 'struct.html#ImageElement', '&lt;image&gt;')}}</td>
   <td>{{Spec2('SVG1.1')}} 推荐</td>
   <td>初版规范</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{ CompatGeckoDesktop('1.8') }}</td>
   <td>{{ CompatIE('9.0') }}</td>
   <td>{{ CompatOpera('8.0') }}</td>
   <td>{{ CompatSafari('3.0.4') }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatAndroid('3.0') }}</td>
   <td>{{ CompatGeckoMobile('1.8') }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatVersionUnknown() }}</td>
   <td>{{ CompatSafari('3.0.4') }}</td>
  </tr>
 </tbody>
</table>
</div>

<p>该表格基于<a href="/en/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">这些资源</a>。</p>