如何使 SVG 元素隨其父容器展開和收縮？

將SVG 元素展開和收縮到父容器

挑戰是確保SVG 元素展開或收縮以匹配其父容器的尺寸，無論容器大小如何。

常見解決方案：viewBox

流行的解決方案包括在 SVG 元素上設定 viewBox 屬性。但是，當 SVG 中的子元素具有固定寬度或高度時，這可能無效。

基於百分比的元素尺寸

另一種方法是使用百分比 - SVG 中元素的基於寬度和高度。這反映了使用 的嵌入式 SVG 的行為，無論元素尺寸如何，它都會無縫擴展和收縮。

Inkscape 百分比設定

如果基於百分比的尺寸是首選，請考慮修改 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中文網其他相關文章！