--- id: 587d7fa8367417b2b2512bcc title: Display Shapes with SVG challengeType: 6 videoUrl: '' localeTitle: 使用SVG显示形状 --- ## Description
最后一个挑战创建了一个具有给定宽度和高度的svg元素，这是可见的，因为它在style标记中应用了background-color 。代码为给定的宽度和高度创建了空间。下一步是创建一个放入svg区域的形状。 SVG中有许多支持的形状，例如矩形和圆形。它们用于显示数据。例如，矩形（ <rect> ）SVG形状可以在条形图中创建条形。将形状放入svg区域时，可以指定x和y坐标的位置。 （0,0）的原点位于左上角。 x正值将形状推向右侧， y正值将形状从原点向下推。要将形状放置在距离上次挑战的500（宽度）x 100（高度） svg的中间， x坐标将为250， y坐标将为50. SVG rect具有四个属性。它位于svg区域的位置有x和y坐标。它还有一个height和width来指定大小。
## Instructions
使用append()为svg添加一个rect形状，并为其赋予width属性25和height属性100.此外，将每个设置的rect x和y属性设置为0。
## Tests
```yml tests: - text: 您的文档应该有1个rect元素。 testString: 'assert($("rect").length == 1, "Your document should have 1 rect element.");' - text: rect元素的width属性应设置为25。 testString: 'assert($("rect").attr("width") == "25", "The rect element should have a width attribute set to 25.");' - text: rect元素的height属性应设置为100。 testString: 'assert($("rect").attr("height") == "100", "The rect element should have a height attribute set to 100.");' - text: rect元素的x属性应设置为0。 testString: 'assert($("rect").attr("x") == "0", "The rect element should have an x attribute set to 0.");' - text: rect元素的y属性应设置为0。 testString: 'assert($("rect").attr("y") == "0", "The rect element should have a y attribute set to 0.");' ```
## Challenge Seed
```html ```
## Solution
```js // solution required ```