aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/svg/attribute/style/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/zh-cn/web/svg/attribute/style/index.html')
-rw-r--r--files/zh-cn/web/svg/attribute/style/index.html77
1 files changed, 77 insertions, 0 deletions
diff --git a/files/zh-cn/web/svg/attribute/style/index.html b/files/zh-cn/web/svg/attribute/style/index.html
new file mode 100644
index 0000000000..3bae57e589
--- /dev/null
+++ b/files/zh-cn/web/svg/attribute/style/index.html
@@ -0,0 +1,77 @@
+---
+title: style
+slug: Web/SVG/Attribute/style
+tags:
+ - SVG
+ - SVG Attribute
+ - Style
+ - svg style
+translation_of: Web/SVG/Attribute/style
+---
+<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
+
+<p><strong><code>style </code></strong>属性指定了指定其元素的样式信息。它的功能与 HTML 中的<a href="/zh-CN/docs/Web/HTML/Global_attributes/style">style</a>属性相同。</p>
+
+<h2 id="使用环境">使用环境</h2>
+
+<table class="standard-table">
+ <tbody>
+ <tr>
+ <th scope="row">Categories</th>
+ <td>Presentation attribute</td>
+ </tr>
+ <tr>
+ <th scope="row">Value</th>
+ <td>&lt;style&gt;</td>
+ </tr>
+ <tr>
+ <th scope="row">Animatable</th>
+ <td>No</td>
+ </tr>
+ <tr>
+ <th scope="row">Normative document</th>
+ <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#StyleAttribute" title="http://www.w3.org/TR/SVG/styling.html#StyleAttribute">SVG 1.1 (2nd Edition)</a></td>
+ </tr>
+ </tbody>
+</table>
+
+<dl>
+ <dt>&lt;style&gt;</dt>
+ <dd>样式数据的语法取决于样式表语言。默认情况下,如果未指定 {{ SVGAttr("contentStyleType") }},样式表语言为CSS。</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>以下示例展示了使用CSS作为样式表语言来使用style属性,为一个矩形框添加样式。</p>
+
+<pre class="brush: html">&lt;svg version="1.1" viewbox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg"&gt;
+ &lt;rect height="300" width="600" x="200" y="100"
+ style="fill: red; stroke: blue; stroke-width: 3"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<h2 id="元素">元素</h2>
+
+<p>以下元素可以使用style属性</p>
+
+<ul>
+ <li><a href="/en/SVG/Element#Container" title="en/SVG/Element#Container">Container elements</a> »</li>
+ <li><a href="/en/SVG/Element#FilterPrimitive" title="en/SVG/Element#FilterPrimitive">Filter primitive elements</a> »</li>
+ <li><a href="/en/SVG/Element#Gradient" title="en/SVG/Element#Gradient">Gradient elements</a> »</li>
+ <li><a href="/en/SVG/Element#Graphics" title="en/SVG/Element#Graphics">Graphics elements</a> »</li>
+ <li><a href="/en/SVG/Element#Structural" title="en/SVG/Element#Structural">Structural elements</a> »</li>
+ <li><a href="/en/SVG/Element#TextContent" title="en/SVG/Element#TextContent">Text content elements</a> »</li>
+ <li>{{ SVGElement("clipPath") }}</li>
+ <li>{{ SVGElement("filter") }}</li>
+ <li>{{ SVGElement("font") }}</li>
+ <li>{{ SVGElement("foreignObject") }}</li>
+ <li>{{ SVGElement("glyphRef") }}</li>
+ <li>{{ SVGElement("stop") }}</li>
+ <li>{{ SVGElement("glyph") }}</li>
+</ul>
+
+<h2 id="相关">相关</h2>
+
+<ul>
+ <li>{{ SVGElement("style") }}</li>
+</ul>