如何使 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中文网其他相关文章！