SVG填充铺满到网页DIV的示例

原创已于 2025-07-31 16:00:52 修改 · 930 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

于 2025-07-31 15:59:38 首次发布

HTML5 同时被 2 个专栏收录

6 篇文章

订阅专栏

SVG

1 篇文章

订阅专栏

SVG填充铺满到网页DIV的示例

重点
上代码
效果

重点

svg节点属性设置width、height均为100%，preserveAspectRatio属性设置为none，即可实现铺满、不保持原svg比例。
如果想要svg固定高度，可设置svg的height属性为固定值，如：30

上代码

注意：代码中三个svg节点，内容一致。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="
      padding: 10px;
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      position: relative;
    ">
        <svg viewBox="0 0 600 30" width="100%" height="100%" preserveAspectRatio="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L150 0 L120 30 L0 30 Z" style="fill: #409eff" />
            <path d="M150 0  L150 15 L135 15 Z" style="fill: #0034b5" />
            <path d="M135 15 L120 30 L585 30 L600 15Z" style="fill: #f1f2f5" />
            <path d="M150 7 L600 7" style="stroke: #409eff" stroke-dasharray="3" stroke-width="2" />
        </svg>
    </div>

    <div style="
      padding: 10px;
      width: 50%;
      height: 60px;
      box-sizing: border-box;
      position: relative;
    ">
        <svg viewBox="0 0 600 30" width="100%" height="100%" preserveAspectRatio="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L150 0 L120 30 L0 30 Z" style="fill: #409eff" />
            <path d="M150 0  L150 15 L135 15 Z" style="fill: #0034b5" />
            <path d="M135 15 L120 30 L585 30 L600 15Z" style="fill: #f1f2f5" />
            <path d="M150 7 L600 7" style="stroke: #409eff" stroke-dasharray="3" stroke-width="2" />
        </svg>
    </div>

    <div style="
      padding: 10px;
      width: 30%;
      height: 40px;
      box-sizing: border-box;
      position: relative;
    ">
        <svg viewBox="0 0 600 30" width="100%" height="100%" preserveAspectRatio="none"
            xmlns="http://www.w3.org/2000/svg">
            <path d="M0 0 L150 0 L120 30 L0 30 Z" style="fill: #409eff" />
            <path d="M150 0  L150 15 L135 15 Z" style="fill: #0034b5" />
            <path d="M135 15 L120 30 L585 30 L600 15Z" style="fill: #f1f2f5" />
            <path d="M150 7 L600 7" style="stroke: #409eff" stroke-dasharray="3" stroke-width="2" />
        </svg>
    </div>
</body>

</html>

效果

在这里插入图片描述