質問編集履歴
3
コード削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,45 +5,7 @@
|
|
|
5
5
|
###発生している問題・エラーメッセージ
|
|
6
6
|
機能自体は実現できているが画面に収まりきらずスクロールバーが出る場合に親の背景が途切れてしまう。
|
|
7
7
|
|
|
8
|
-
###該当のソースコード
|
|
9
8
|
|
|
10
|
-
```html
|
|
11
|
-
<!-- parent.component.heml -->
|
|
12
|
-
<div>
|
|
13
|
-
<mat-slider min="50" max="200" step="1" [(ngModel)]="value"></mat-slider>
|
|
14
|
-
<span>{{ value }}</span>
|
|
15
|
-
<div>
|
|
16
|
-
<svg [magnification]="value"></svg>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
```
|
|
20
|
-
```html
|
|
21
|
-
<!-- svg.component.html -->
|
|
22
|
-
<div class="background">
|
|
23
|
-
<svg [attr.viewBox]="viewBox()">
|
|
24
|
-
<g>
|
|
25
|
-
<rect x="0" y="0" width="100" height="100"/>
|
|
26
|
-
</g>
|
|
27
|
-
</svg>
|
|
28
|
-
</div>
|
|
29
|
-
```
|
|
30
|
-
```typescript
|
|
31
|
-
//svg.component.ts
|
|
32
|
-
//import省略
|
|
33
|
-
@Component({
|
|
34
|
-
selector: 'svg',
|
|
35
|
-
etc...
|
|
36
|
-
)}
|
|
37
|
-
|
|
38
|
-
export class svgComponent {
|
|
39
|
-
@Input() magnification: number;
|
|
40
|
-
|
|
41
|
-
viewBox(): string{
|
|
42
|
-
return '0 0 ' + 100 * this.magniication / 100 + ' ' + 100 * this.magnification / 100;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
```
|
|
47
9
|
ViewBoxのWidthとHeightをTypescript側で親のスライダーの値によって大きさを変えている状態です。
|
|
48
10
|
|
|
49
11
|
よろしくお願いします。
|
2
ファイル名の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,8 +8,9 @@
|
|
|
8
8
|
###該当のソースコード
|
|
9
9
|
|
|
10
10
|
```html
|
|
11
|
+
<!-- parent.component.heml -->
|
|
11
12
|
<div>
|
|
12
|
-
<mat-slider min="
|
|
13
|
+
<mat-slider min="50" max="200" step="1" [(ngModel)]="value"></mat-slider>
|
|
13
14
|
<span>{{ value }}</span>
|
|
14
15
|
<div>
|
|
15
16
|
<svg [magnification]="value"></svg>
|
|
@@ -17,7 +18,7 @@
|
|
|
17
18
|
</div>
|
|
18
19
|
```
|
|
19
20
|
```html
|
|
20
|
-
<!-- svg.html -->
|
|
21
|
+
<!-- svg.component.html -->
|
|
21
22
|
<div class="background">
|
|
22
23
|
<svg [attr.viewBox]="viewBox()">
|
|
23
24
|
<g>
|
|
@@ -27,6 +28,7 @@
|
|
|
27
28
|
</div>
|
|
28
29
|
```
|
|
29
30
|
```typescript
|
|
31
|
+
//svg.component.ts
|
|
30
32
|
//import省略
|
|
31
33
|
@Component({
|
|
32
34
|
selector: 'svg',
|
1
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,17 @@
|
|
|
6
6
|
機能自体は実現できているが画面に収まりきらずスクロールバーが出る場合に親の背景が途切れてしまう。
|
|
7
7
|
|
|
8
8
|
###該当のソースコード
|
|
9
|
+
|
|
9
10
|
```html
|
|
11
|
+
<div>
|
|
12
|
+
<mat-slider min="1" max="100" step="1" [(ngModel)]="value"></mat-slider>
|
|
13
|
+
<span>{{ value }}</span>
|
|
14
|
+
<div>
|
|
15
|
+
<svg [magnification]="value"></svg>
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
```
|
|
19
|
+
```html
|
|
10
20
|
<!-- svg.html -->
|
|
11
21
|
<div class="background">
|
|
12
22
|
<svg [attr.viewBox]="viewBox()">
|
|
@@ -16,6 +26,22 @@
|
|
|
16
26
|
</svg>
|
|
17
27
|
</div>
|
|
18
28
|
```
|
|
29
|
+
```typescript
|
|
30
|
+
//import省略
|
|
31
|
+
@Component({
|
|
32
|
+
selector: 'svg',
|
|
33
|
+
etc...
|
|
34
|
+
)}
|
|
35
|
+
|
|
36
|
+
export class svgComponent {
|
|
37
|
+
@Input() magnification: number;
|
|
38
|
+
|
|
39
|
+
viewBox(): string{
|
|
40
|
+
return '0 0 ' + 100 * this.magniication / 100 + ' ' + 100 * this.magnification / 100;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
```
|
|
19
45
|
ViewBoxのWidthとHeightをTypescript側で親のスライダーの値によって大きさを変えている状態です。
|
|
20
46
|
|
|
21
47
|
よろしくお願いします。
|