files/zh-cn/web/svg/attribute/rx/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

---
title: rx
slug: Web/SVG/Attribute/rx
tags:
  - SVG
  - SVG属性
translation_of: Web/SVG/Attribute/rx
---
<div>{{SVGRef}}</div>

<p><strong><code>rx</code></strong> 属性用于定义水平轴向的圆角半径尺寸。</p>

<p>{{SVGElement("ellipse")}} 和 {{SVGElement("rect")}} 两个基本图形使用了这个属性。</p>

<div id="topExample">
<div class="hidden"> </div>
</div>

<div id="topExample">
<div class="hidden">
<pre class="brush: css">html,body,svg { height:100% }</pre>
</div>

<pre class="brush: html">&lt;svg viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;ellipse cx="50"  cy="50" rx="0"  ry="25" /&gt;
  &lt;ellipse cx="150" cy="50" rx="25" ry="25" /&gt;
  &lt;ellipse cx="250" cy="50" rx="50" ry="25" /&gt;

  &lt;rect x="20"  y="120" width="60" height="60" rx="0"   ry="15"/&gt;
  &lt;rect x="120" y="120" width="60" height="60" rx="15"  ry="15"/&gt;
  &lt;rect x="220" y="120" width="60" height="60" rx="150" ry="15"/&gt;
&lt;/svg&gt;</pre>

<p>{{EmbedLiveSample('topExample', '100%', 200)}}</p>
</div>

<h2 id="椭圆">椭圆</h2>

<p>对于 {{SVGElement('ellipse')}}，<code>rx</code> 属性定义了水平方向的半径尺寸。如果使用了负值或者零，那么椭圆就不会被绘制。</p>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">取值</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
  </tr>
  <tr>
   <th scope="row">默认值</th>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <th scope="row">是否支持动画</th>
   <td>是</td>
  </tr>
 </tbody>
</table>

<p class="note"><strong>注释:</strong> 从 SVG2 开始， <code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作椭圆的CSS属性。</p>

<h2 id="矩形">矩形</h2>

<p>对于 {{SVGElement('rect')}}，<code>rx</code> 定义了水平方向的圆角尺寸。</p>

<p><code>rx</code> 属性的实际效果取决于矩形的 {{SVGAttr("ry")}} 属性和宽度：</p>

<ul>
 <li>如果你为 <code>rx</code> 属性指定了正确的值，但是没有定义 {{SVGAttr("ry")}} 属性的值，那么浏览器会让 {{SVGAttr("ry")}} 取 <code>rx</code> 属性被指定的相等的值。（反之亦然）</li>
 <li>如果 <code>rx</code> 和 {{SVGAttr("ry")}} 都没有被正确的赋值，那么浏览器会绘制一个带有直角尖角的矩形。</li>
 <li><code>rx</code> 属性的有效值为矩形宽度的一半（即，如果为 <code>rx</code> 指定的值大于矩形宽度的一半，那么浏览器会视为 <code>rx</code> 的值为矩形宽度的一半）。</li>
</ul>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">取值</th>
   <td><strong><a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a></strong> | <strong><a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a></strong> | <code>auto</code></td>
  </tr>
  <tr>
   <th scope="row">缺省值</th>
   <td><code>auto</code></td>
  </tr>
  <tr>
   <th scope="row">是否支持动画</th>
   <td>是</td>
  </tr>
 </tbody>
</table>

<p class="note"><strong>注释:</strong> 从 SVG2 开始，<code>rx</code> 是一个几何属性，也就是说，这个属性也可以用作矩形（rect）的 CSS 属性。</p>

<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", "geometry.html#RX", "rx")}}</td>
   <td>{{Spec2("SVG2")}}</td>
   <td>被定义为几何属性</td>
  </tr>
  <tr>
   <td>{{SpecName("SVG1.1", "shapes.html#EllipseElementRXAttribute", "rx")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td><code>&lt;ellipse&gt;</code> 的初始定义</td>
  </tr>
  <tr>
   <td> {{SpecName("SVG1.1", "shapes.html#RectElementRXAttribute", "rx")}}</td>
   <td>{{Spec2("SVG1.1")}}</td>
   <td><code>&lt;rect&gt;</code> 的初始定义</td>
  </tr>
 </tbody>
</table>