这篇文章需要技术复核。如何帮忙。
我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
The SVGRect
represents a rectangle. Rectangles consist of <code>x</code> and <code>y</code> coordinate pair identifying a minimum X value, a minimum Y value, and a width and height, which are constrained to be non-negative.
An SVGRect
object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown
Properties
x
The exact effect of this coordinate depend on each element.If the attribute is not specified, the effect is as if a value of "0" were specified.
y
The exact effect of this coordinate depend on each element.If the attribute is not specified, the effect is as if a value of "0" were specified.
Width
This represents the width of the rectangle.A value that is negative results to an error. A value of zero disables rendering of the element
Height
This represents the height of the rectangle.A value that is negative results to an error.A value of zero disables rendering of the element.
Exceptions on setting: a DOMException
with code NO_MODIFICATION_ALLOWED_ERR
is Raised on an attempt to change the value of a read only attribute.
Methods
The SVGRect
interface do not provide any specific methods.
Example
Here is a simple usage of rect interface. (Changing the color of the rect interface on every click)
<svg xmlns="https://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" id="myrect" onclick="doRectClick()" /> <text x="60" y="40" fill="white" font-size="40" onclick="doRectClick();">Click Me</text> </svg>
function doRectClick(){ var myrect = document.getElementById('myrect'); var r = Math.floor(Math.random() * 255); var g = Math.floor(Math.random() * 255); var b = Math.floor(Math.random() * 255); myrect.style.fill = 'rgb(' + r + ', ' + g + ' , ' + b + ')'; }
Click the rect
Specifications
Specification | Status | Comment |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of '<rect>' in that specification. |
Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) | ||
---|---|---|---|---|---|---|---|
Basic support | 1.0 |
|
9.0 | 8.0 | 3.0.4 |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | ||
---|---|---|---|---|---|---|---|
Basic support | 3.0 | 1.0 (1.8) | No support |
|
3.0.4 |