SVG 要素を親コンテナーに合わせて拡張および縮小させるにはどうすればよいですか?

SVG 要素を親コンテナに拡張および縮小する

課題は、SVG 要素が親コンテナの寸法に一致するように拡張または縮小されることを確認することです。

一般的な解決策: viewBox

一般的な解決策には、SVG 要素に viewBox 属性を設定することが含まれます。ただし、SVG 内の子要素の幅や高さが固定されている場合、これは効果的ではない可能性があります。

パーセントベースの要素の寸法

別のアプローチは、パーセントを使用することです。 SVG 内の要素の幅と高さに基づきます。これは、 を使用した埋め込み SVG の動作を反映しており、特定の要素の寸法に関係なくシームレスに拡大および縮小します。

Inkscape パーセンテージ設定

Ifパーセンテージベースの寸法が推奨されます。Inkscape のデフォルト設定を変更することを検討してください。 「オブジェクト」メニューの「拡大縮小」オプションを見つけて、「拡大縮小: パーセンテージ」を有効にします。これにより、SVG 内で作成されたすべての要素がパーセンテージベースのディメンションを持つようになります。

パーセンテージベースのディメンションを使用したコード例

更新されたコード例は次のとおりです:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="10%" height="10%" />
    </svg>
</div>

これにより、SVG 内の四角形が親コンテナの寸法に比例して拡大および縮小されます。

以上がSVG 要素を親コンテナーに合わせて拡張および縮小させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。