teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

4

脱字の修正

2020/03/20 20:33

投稿

brsice
brsice

スコア17

title CHANGED
File without changes
body CHANGED
@@ -58,4 +58,4 @@
58
58
  ### 解決策
59
59
  useだと余白が発生してしまう明確な原因というのは分かりませんでしたが、viewBoxを与えれば意図通りに表示されることが分かったので解決とさせていただきます。
60
60
  Reactを使用しているので、SVGからuseにidとviewBoxをセットにしたコンポーネントを作成して使用することにしました。
61
- お二方ありがとうございました。
61
+ お二方ともありがとうございました。

3

解決策の追加

2020/03/20 20:33

投稿

brsice
brsice

スコア17

title CHANGED
File without changes
body CHANGED
@@ -52,4 +52,10 @@
52
52
  height: 100%;
53
53
  width: auto;
54
54
  }
55
- ```
55
+ ```
56
+
57
+
58
+ ### 解決策
59
+ useだと余白が発生してしまう明確な原因というのは分かりませんでしたが、viewBoxを与えれば意図通りに表示されることが分かったので解決とさせていただきます。
60
+ Reactを使用しているので、SVGからuseにidとviewBoxをセットにしたコンポーネントを作成して使用することにしました。
61
+ お二方ありがとうございました。

2

消し忘れ部分を修正

2020/03/20 20:27

投稿

brsice
brsice

スコア17

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
 
8
8
  ### 発生している問題・エラーメッセージ
9
- レイアウトが崩れる原因となる部分となっている要素のコードを載せます。
9
+ レイアウトが崩れる原因となっている要素のコードを載せます。
10
10
  画像はCodePenで実行した結果です。
11
11
  期待する結果は、1つ目のように、heightのみを指定すればwidthはアスペクト比を維持するように設定されるというものです。
12
12
  しかしuseを用いると、画像自体のアスペクト比は維持できているものの、親要素いっぱいまで余白が設定されてしまいます。

1

タイトルの修正

2020/03/19 07:14

投稿

brsice
brsice

スコア17

title CHANGED
@@ -1,1 +1,1 @@
1
- useで読み込んだSVG画像のwidth
1
+ useで読み込んだSVG画像に余白が表示されてしまう
body CHANGED
File without changes