blob: 80fbdbc59b5d1b22660a6ace460aa7fe8e13e985 (
plain)
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
|
---
title: SVG 作为图片
slug: Web/SVG/SVG_as_an_Image
tags:
- SVG
- 图像
- 需要内容
translation_of: Web/SVG/SVG_as_an_Image
---
<p>SVG图像可以作为一种图片格式用在很多环境中。很多浏览器支持在下列环境中应用SVG图像：</p>
<ul>
<li>HTML的{{HTMLElement("img")}} 元素或 {{HTMLElement("svg")}} 元素</li>
<li>CSS的{{cssxref("background-image")}}属性</li>
</ul>
<h2 id="Gecko专有的环境">Gecko专有的环境</h2>
<p>另外，Gecko 2.0 {{geckoRelease("2.0")}}引入了在以下环境中支持使用SVG：</p>
<ul>
<li>CSS的{{cssxref("list-style-image")}}属性</li>
<li>SVG的{{SVGElement("image")}}元素</li>
<li>SVG的{{SVGElement("feImage")}}元素</li>
<li>Canvas的<a href="/zh-CN/docs/HTML/Canvas/Tutorial/Using_images#drawImage"><code>drawImage</code></a>函数</li>
</ul>
<h3 id="局限">局限</h3>
<p>如果SVG作为一个图像，出于安全目的，Gecko在SVG环境上作了一些限制：</p>
<ul>
<li>禁用了<a href="/zh-CN/docs/JavaScript">JavaScript</a>。</li>
<li>外部源（比如说：图像、样式表）不能载入，然而行内源可以使用（利用<a href="/zh-CN/docs/DOM/BlobBuilder">BlobBuilder</a>对象URL或者data: URI属性）。</li>
<li>链接的{{cssxref(":visited")}}伪类不能呈现。</li>
<li>禁用了平台原生的小部件样式（基于操作系统主题）</li>
</ul>
<p>注意上面的限制是对图像环境专有的；它们不能应用到直接看到的SVG上，也不能应用到嵌入在HTML的{{HTMLElement("iframe")}}元素、{{HTMLElement("object")}}元素和{{HTMLElement("embed")}}元素中的SVG上。</p>
<h2 id="规范文档">规范文档</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-img-element", "SVG within <img> element")}}</td>
<td>{{Spec2("HTML5 W3C")}}</td>
<td>定义了{{HTMLElement("img")}}元素内部的SVG用法。</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Backgrounds", "#the-background-image", "SVG within 'background-image' CSS property")}}</td>
<td>{{Spec2("CSS3 Backgrounds")}}</td>
<td>定义了{{cssxref("background-image")}}属性中的SVG的用法。</td>
</tr>
<tr>
<td>{{SpecName("SVG and HTML")}}</td>
<td>{{Spec2("SVG and HTML")}}</td>
<td>定义了HTML和XHTML内部的SVG的行内用法。</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<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</th>
</tr>
<tr>
<td>in HTML {{HTMLElement("img")}}</td>
<td>4.0</td>
<td>{{CompatGeckoDesktop("2")}}</td>
<td>9</td>
<td>9.0</td>
<td>4</td>
</tr>
<tr>
<td>in CSS background</td>
<td>4.0</td>
<td>{{CompatGeckoDesktop("2")}}</td>
<td>9</td>
<td>9.5</td>
<td>5</td>
</tr>
<tr>
<td>in other contexts</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("2")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</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 Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>in HTML {{HTMLElement("img")}}</td>
<td>3.0</td>
<td>{{CompatGeckoMobile("2")}}</td>
<td>{{CompatUnknown}}</td>
<td>10.0</td>
<td>4.0</td>
</tr>
<tr>
<td>in CSS background</td>
<td>3.0</td>
<td>{{CompatGeckoMobile("2")}}</td>
<td>{{CompatUnknown}}</td>
<td>10.0</td>
<td>3.2<sup>[1]</sup></td>
</tr>
<tr>
<td>in other contexts</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("2")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Safari移动浏览器只有在CSS background中实现了对SVG的部分支持</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/zh-CN/docs/SVG_In_HTML_Introduction">SVG in HTML introduction</a></li>
</ul>
|
