web-dev-qa-db-ja.com

高さ：SVGの自動が機能しない

ここで説明する「シンボル」メソッドを使用してSVGスプライトシートを使用しようとしています。

http://css-tricks.com/svg-sprites-use-better-icon-fonts/

私のHTMLは非常に単純です。

<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>

そして、ここにSVGファイルからのサンプルシンボルがあります

<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol>

私が抱えている問題は、CSSを使用してSVG要素の幅を64pxに設定すると、SVGの高さが自動的に150ピクセルに設定されることです。 height：autoを設定してみました。と高さ：100％; SVG要素では、違いはありません。これを機能させる唯一の方法は、height：64pxを設定することです。アイコンの縦横比が常に正方形であるとは限らないため、これを行いたくありません。私がしたいことは、SVGを元のアスペクト比で自動的にスケーリングすることです。したがって、幅を400pxに設定すると、4：3アイコン（ビューボックスで定義）が自動的に300pxの高さを取得します。

SVGのスケーリングとアスペクト比の保持に関するいくつかのガイドを読みましたが、IMG要素を使用するときに解決策があるガイドもありますが、インラインSVGS用のガイドが見つからないか、USEで外部SVGを使用できません。

IE9 +とAndroid 4.0+？

csssvgaspect-ratio
16
jonhobbs

[〜＃〜] demo [〜＃〜]

リンクする各要素にviewBoxを定義する必要があります。 1つのSVGドキュメントに異なる要素が含まれる可能性があるためです。

リンクする要素からviewBoxを削除してください。リンク元の場所にviewBoxを追加します。

ViewBoxをsvg要素に追加することをお勧めします。

<svg class="test" viewBox="0 0 25 25">
    <use xlink:href="/images/iconSprite.svg#clock"/>
</svg>

これでスケーリングできます。

CSSの幅を定義する場合：

.test {
    width: 50px;
}

高さまたは幅に収まる限り表示されます。

したがって、レスポンシブデザインが必要な場合は、％の長さで単純にスケーリングできます
.test { width:30%; }

SCALE SVG CSS-tricksからのsvgのスケーリングに関する本当に良い記事:)

18
Persijn

古いバージョンのSafariと、いくつかの古いAndroidブラウザーでは、ビューボックスと幅を設定するだけでは不十分でした。

私のインスタンスでは、高さ：100％を適用する必要があります。と同様に幅。

2
skribbz14