検索
ホームページウェブフロントエンドCSSチュートリアルインライン SVG を親コンテナに比例してスケールするにはどうすればよいですか?

How Do I Make Inline SVGs Scale Proportionally with Their Parent Container?

親コンテナに比例してインライン SVG をスケールする

親コンテナに比例してインライン SVG スケールを設定すると、SVG のサイズを動的に変更する便利な方法になりますコンテンツ。これは、HTML 要素内に SVG グラフィックを埋め込み、それらが適切に拡大縮小されるようにする必要がある場合に適しています。これを実現する方法は次のとおりです。

<svg viewbox="0 0 100 50">
  <polygon fill="red" points="0,0 100,0 50,50"></polygon>
</svg>

この例では、viewBox 属性で定義されているように、SVG 要素の幅は 100、高さは 50 です。 Polygon 要素は、SVG の幅と高さ全体にわたる三角形を表します。

viewBox 属性は、SVG のコンテンツの座標を指定します。この場合、座標の範囲は水平方向に 0 ~ 100、垂直方向に 0 ~ 50 になります。 CSS を使用して SVG 要素のサイズを変更した場合でも、三角形は常に viewBox 領域全体を埋めます。

svg {
  width: 300px; /* Can be any value */
  height: auto; /* Automatically scales height */
}

SVG 要素の幅を設定することで、含まれる要素の希望のサイズを指定できます。高さは SVG のアスペクト比を維持するように自動的に調整され、三角形が比例的に拡大縮小されたままになります。

このアプローチにより、外部ファイルを使用したりスタイルを犠牲にしたりすることなく、HTML 要素内に SVG を埋め込み、そのサイズを動的に制御できます。オプション。

以上がインライン SVG を親コンテナに比例してスケールするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
毎週のプラットフォームニュース:画像が画像要素でロードされるのを防ぐ、私たちが望むWeb、SVGスタイルはスコープされていません毎週のプラットフォームニュース:画像が画像要素でロードされるのを防ぐ、私たちが望むWeb、SVGスタイルはスコープされていませんApr 18, 2025 am 09:57 AM

今週のブラウザニュースの週の週のまとめ、画像要素を条件に画像をロードするためのトリック、あなたのチャンスはクッパのベンダーに伝えます

NetLifyフォームとNetLify関数を使用して、電子メールサインアップウィジェットを作成するNetLifyフォームとNetLify関数を使用して、電子メールサインアップウィジェットを作成するApr 18, 2025 am 09:54 AM

独自のウェブサイトを構築して維持することは素晴らしいアイデアです。プラットフォームを所有しているだけでなく、途中でWebテクノロジーを実験することができます。

毎週のプラットフォームニュース:CSSフォントスタイル:斜め、webhintブラウザー拡張機能、CSSモジュールV1毎週のプラットフォームニュース:CSSフォントスタイル:斜め、webhintブラウザー拡張機能、CSSモジュールV1Apr 18, 2025 am 09:53 AM

今週のラウンドアップでは、可変フォントが斜め、糸くずの新しいブラウザ拡張機能、および最初のバージョンのCSSモジュールを取得します。

インタラクティブなWebアプリケーションの構築でMavoを照らしましょうインタラクティブなWebアプリケーションの構築でMavoを照らしましょうApr 18, 2025 am 09:50 AM

タイトルから推測できるように、このチュートリアルはMavoに捧げられています。

有罪判決有罪判決Apr 18, 2025 am 09:49 AM

David Desandroには、長年にわたって作成された非常にクールなJavaScriptライブラリがたくさんあります。彼の最新は、「ラウンド、フラット、デザイナーに優しい擬似3D」であるZDOGです

ssceccesscecceApr 18, 2025 am 09:47 AM

「テストの削減」とは何かを知っていますよね?私たちはここでそれについて話しました。私はこのコンセプトが多くの人生の歩みに役立つと思いますが、

UseEffectを1回だけ実行しますUseEffectを1回だけ実行しますApr 18, 2025 am 09:46 AM

Reactには、useefectと呼ばれる組み込みフックがあります。フックは機能コンポーネントで使用されます。 Effectを使用するクラスコンポーネントの比較はメソッドです

WordPressレイアウトにCSSグリッドをもたらしますWordPressレイアウトにCSSグリッドをもたらしますApr 18, 2025 am 09:45 AM

2018年12月6日は、WordPressの特別な日付でした。今日まで、ソフトウェアのバージョン5.0のリリースをマークしました。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境