web-dev-qa-db-ja.com

SVG画像がCSSの「width」プロパティを使用してスケーリングしないのはなぜですか？

ポートフォリオWebサイトを構築しています。

HTMLコード

<div id = "hero">
   <div id = "social">
      <img src = "facebook.svg">
      <img src = "linkedin.svg">
      <img src = "instagram.svg">
    </div>
</div>

CSSコード（SASSを使用）

#hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;

    #social {
        width: 50%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        img {
            width: 2em;
        }
    }
}

問題は、CSS widthプロパティを使用してSVGのサイズを変更できないことです。さまざまな場合に取得するものを次に示します。

img { width: 2em; }

enter image description here

img { width: 3em; }

enter image description here

img { width: em; }

enter image description here

hero divの中央に向かってアイコンがどのように折り畳まれるかに注意してください。

代わりに、CSS heightプロパティを使用する場合：

img { height: 2em; }

enter image description here

img { height: 3em; }

enter image description here

img { height: 4em; }

enter image description here

この動作は私が必要とするものですが、これが正しい方法であるかどうかはわかりません。なぜこれが起こるのですか？ SVG画像のサイズを変更するより良い方法を知っていますか（特にflexboxモデルを使用）。

htmlcsssvgsass
36
Franco Scarpa

SVGは、PNGなどのビットマップイメージとは異なります。SVGにviewBoxがある場合（表示されるとおり）、定義されたビューポートに合わせてスケーリングされます。 PNGのように直接スケーリングすることはできません。

したがって、widthのimgを増やしても、高さが制限されている場合、アイコンの高さは高くなりません。 imgが水平方向に広いボックスの中央にくるだけです。

あなたの問題は、SVGで定義された高さが固定されていることだと思います。 SVGファイルを開き、次のいずれかを確認します。

  1. widthおよびheightが定義されていない、または
  2. widthとheightの両方が"100%"に設定されている。

これで問題が解決するはずです。そうでない場合は、SVGの1つを質問に投稿して、その定義を確認してください。

54
Paul LeBeau

viewBoxプロパティを変更して、svgで高さと幅を正しく変更する必要があります。 svgの<svg>タグ内にあります。

https://developer.mozilla.org/en/docs/Web/SVG/Attribute/viewBox

1
Félix Bachand

私は自分でそれを把握しなければなりませんでしたが、ビューポートと幅+高さを一致させる必要があるsvgがいくつかあります.

例えば。既にwidth="x"height="y"がある場合は、=>

<svg ... viewport="0 0 [width] [height]">を追加

そしてその反対。

その後、<svg ... style="width: xxx; height: yyy;">でスケーリングします

1
OZZIE

私は同じ問題を抱えています...そして、簡単な解決策を見つけました。フォローツールを使用してSVGイメージをインポートし、エクスポートするだけです。 https://editor.method.ac/

0
Lucas Moyano Angelini