---
id: 587d7fa8367417b2b2512bcb
title: Learn About SVG in D3
required:
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
challengeType: 6
videoUrl: ''
localeTitle: 在D3中了解SVG
---
## Description
SVG代表Scalable Vector Graphics 。这里的“可缩放”意味着，如果放大或缩小对象，它就不会出现像素化。它可以与显示系统一起扩展，无论是在小型移动屏幕还是大型电视监视器上。 SVG用于制作常见的几何形状。由于D3将数据映射到可视化表示，因此它使用SVG为可视化创建形状。网页的SVG形状必须位于HTML svg标记内。当样式使用相对单位（例如vh ， vw或百分比）时，CSS可以是可伸缩的，但使用SVG可以更灵活地构建数据可视化。
## Instructions
使用append() svg节点添加到body 。给它一个width属性设置为所提供的w常数和height设置为所提供的属性h使用恒定attr()为每个方法。您将在输出中看到它，因为在style标记中应用了粉红色的background-color 。 注意
宽度和高度属性没有单位。这是缩放的构建块 - 无论缩放级别如何，元素的宽高比始终为5：1。
## Tests
```yml
tests:
- text: 您的文档应该有1个svg元素。
testString: 'assert($("svg").length == 1, "Your document should have 1 svg element.");'
- text: svg元素的width属性应设置为500。
testString: 'assert($("svg").attr("width") == "500", "The svg element should have a width attribute set to 500.");'
- text: svg元素的height属性应设置为100。
testString: 'assert($("svg").attr("height") == "100", "The svg element should have a height attribute set to 100.");'
```
## Challenge Seed
## Solution
```js
// solution required
```