104 lines
3.8 KiB
Markdown
104 lines
3.8 KiB
Markdown
|
---
|
|||
|
|
id: 587d7fa8367417b2b2512bcc
|
|||
|
|
title: Відображення форм за допомогою SVG
|
|||
|
|
challengeType: 6
|
|||
|
|
forumTopicId: 301485
|
|||
|
|
dashedName: display-shapes-with-svg
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
На останньому завданні ми створили елемент `svg` із заданою шириною та висотою, який був помітний, оскільки до нього застосовано `background-color` в тезі `style`. Для заданої ширини та висоти код створює місце.
|
|||
|
|
|
|||
|
|
Наступним кроком є створення форм для розміщення в області `svg`. У SVG існує ряд підтримуваних форм, таких як прямокутники та кола. Їх використовують для відображення даних. Наприклад, форма SVG прямокутника (`<rect>`) може створити елемент у стовпчиковій діаграмі.
|
|||
|
|
|
|||
|
|
Коли ви розміщуєте форму в області `svg`, ви можете вказати, куди вона рухається, з координатами `x` та `y`. Початок координат (0, 0) знаходиться у верхньому лівому куті. Додатні значення для `x` переміщують форму праворуч, а додатні значення для `y` переміщують форму вниз від початку координат.
|
|||
|
|
|
|||
|
|
Щоб розмістити форму посередині 500 (ширина) x 100 (висота) `svg` з останнього завдання, координата `x` буде 250, а `y` координата буде 50.
|
|||
|
|
|
|||
|
|
SVG `rect` має чотири атрибути. Існують координати `x` та `y`, де вони розміщені в області `svg`. Він також має `height` та `width` для визначення розміру.
|
|||
|
|
|
|||
|
|
# --instructions--
|
|||
|
|
|
|||
|
|
Додайте форму `rect` до `svg` використовуючи `append()`, і надайте атрибуту `width` `25` і `height` `100`. Також надайте `rect` атрибутам `x` і `y`, для кожного встановлено значення `0`.
|
|||
|
|
|
|||
|
|
# --hints--
|
|||
|
|
|
|||
|
|
Ваш документ має мати 1 елемент `rect`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').length == 1);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `rect` має мати встановлений атрибут `width` `25`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').attr('width') == '25');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `rect` має мати встановлений атрибут `height` `100`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').attr('height') == '100');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `rect` має мати встановлений атрибут `x` `0`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').attr('x') == '0');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Елемент `rect` має мати встановлений атрибут `y` `0`.
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
assert($('rect').attr('y') == '0');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --seed--
|
|||
|
|
|
|||
|
|
## --seed-contents--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
|||
|
|
|
|||
|
|
const w = 500;
|
|||
|
|
const h = 100;
|
|||
|
|
|
|||
|
|
const svg = d3.select("body")
|
|||
|
|
.append("svg")
|
|||
|
|
.attr("width", w)
|
|||
|
|
.attr("height", h)
|
|||
|
|
// Add your code below this line
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
// Add your code above this line
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<body>
|
|||
|
|
<script>
|
|||
|
|
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
|||
|
|
|
|||
|
|
const w = 500;
|
|||
|
|
const h = 100;
|
|||
|
|
|
|||
|
|
const svg = d3.select("body")
|
|||
|
|
.append("svg")
|
|||
|
|
.attr("width", w)
|
|||
|
|
.attr("height", h)
|
|||
|
|
.append("rect")
|
|||
|
|
.attr("width", 25)
|
|||
|
|
.attr("height", 100)
|
|||
|
|
.attr("x", 0)
|
|||
|
|
.attr("y", 0);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
```
|