From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 files/zh-cn/web/svg/attribute/media/index.html | 90 ++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 files/zh-cn/web/svg/attribute/media/index.html

(limited to 'files/zh-cn/web/svg/attribute/media')

diff --git a/files/zh-cn/web/svg/attribute/media/index.html b/files/zh-cn/web/svg/attribute/media/index.html
new file mode 100644
index 0000000000..ffc594fdb4
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/media/index.html
@@ -0,0 +1,90 @@
+---
+title: media
+slug: Web/SVG/Attribute/media
+translation_of: Web/SVG/Attribute/media
+---
+<div>{{SVGRef}}</div>
+
+<p><span class="seoSummary"><code><strong>media</strong></code>属性指定只有符合{{Glossary("media query")}}的样式表才会被应用。 </span></p>
+
+<p>只有一个元素使用这个属性： {{SVGElement("style")}}</p>
+
+<div id="topExample">
+<div class="hidden">
+<pre class="brush: css">html, body, svg {
+  height: 100%;
+}</pre>
+</div>
+
+<pre class="brush: html; highlight[5]">&lt;svg viewBox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"&gt;
+  &lt;style&gt;
+    rect { fill: black; }
+  &lt;/style&gt;
+  &lt;style media="all and (min-width: 600px)"&gt;
+    rect { fill: seagreen; }
+  &lt;/style&gt;
+
+  &lt;text y="15"&gt;Resize the window to see the effect&lt;/text&gt;
+  &lt;rect y="20" width="200" height="200" /&gt;
+&lt;/svg&gt;</pre>
+
+<p>{{EmbedLiveSample("topExample", "200", "200")}}</p>
+</div>
+
+<h2 id="Usage_notes">Usage notes</h2>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Value</th>
+   <td><code><a href="/en-US/docs/Web/CSS/@media#media-query-list">&lt;media-query-list&gt;</a></code></td>
+  </tr>
+  <tr>
+   <th scope="row">Default value</th>
+   <td><code>all</code></td>
+  </tr>
+  <tr>
+   <th scope="row">Animatable</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt><code>&lt;media-query-list&gt;</code></dt>
+ <dd>
+ <p>This value holds a media query that needs to match in order for the style sheet to be applied.</p>
+
+ <p>如果没有指定，样式表就会被应用。</p>
+ </dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("SVG2", "styling.html#StyleElementMediaAttribute", "media")}}</td>
+   <td>{{Spec2("SVG2")}}</td>
+   <td>Changed the value definition from different media types as defined in CSS 2 to <code><a href="/en-US/docs/Web/CSS/@media#media-query-list">&lt;media-query-list&gt;</a></code>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("SVG1.1", "styling.html#StyleElementMediaAttribute", "media")}}</td>
+   <td>{{Spec2("SVG1.1")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("svg.elements.style.media")}}</p>
-- 
cgit v1.2.3-54-g00ecf