时间戳

首页 > 解决方案 > 无论屏幕大小如何，如何使 svg 占据屏幕的 100%

html - 无论屏幕大小如何，如何使 svg 占据屏幕的 100%

问题描述

我有一个有 SVG 的网站。为了使它看起来像设计师想要的那样，我必须对其进行缩放（transform: scale()）。为了覆盖超出视口宽度的部分，我使用overflow-x: hidden了 body 标签。它适用于所有屏幕。但是在触摸屏设备上，它不起作用并且<html>比（您可以在身体上<body>向右滚动）更宽。overflow-x: hidden我尝试使用 viewBox 属性，但我不太明白它是如何工作的。

另外，我尝试将属性应用到 SVG 和路径 - 没有结果width。max-width

SVG 代码：

        <svg class='service-line' id="move_path" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1">
            <path id="move_path"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
            </path>
        </svg>

我该如何解决这个问题？

提前致谢

标签： htmlcsssvg

解决方案

你有正确的 viewBox 设置，你的 SVG 占据了浏览器窗口宽度的 100%。这可以使用 JS getBBox() 方法看到。在 SVG header
中使用很方便。style = "border: 1px solid red;"红色边框显示 SVG 画布的边框

<svg class='service-line' id="move_path" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1920 399" fill="none" version="1.1" style="border:1px solid red">
            <path  id="move" id="move_path"  stroke="black"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
   </path>
</svg> 
<script>
    let bb = move.getBBox();
        console.log(bb);
</script>

应用时，假设transform =" scale (1.1) "图像被放大并向右和向下移动

有三种方法可以将其放回原处：

  1. 增加width和 height的viewBox倍数与放大图像的倍数一样多， scale 换句话说，您需要乘以 1.1（比例因子 (1.1)）

而不是viewBox = "0 0 1920 399"设置viewBox = "0 0 2012 438.9"

.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg class='service-line' id="move_path" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 2012 438.9" fill="none" version="1.1" style="border:1px solid red">
            <path  id="move" id="move_path" transform="scale(1.1 1.1)" stroke="black"  d="m0 192c0 0 156.5-61.7 235.7-90.1 57.1-20.5 114.2-41.7 172.6-58.1 33.9-9.5 67.7-22.7 102.9-23.2 34.9-0.5 71.7 4.2 102.9 19.9 32.9 16.6 63.3 42.6 81.3 74.7 19.6 34.9 27.3 78 23.2 117.8-3.2 31.9-17.4 63.5-37.1 88.8-19.4 25-47.3 43.4-75.8 57.2-23.7 11.5-50 19.9-76.3 19.9-30.9 0-62.2-9-89.6-23.2-25.8-13.4-49.8-32.6-66.4-56.4-19.2-27.6-32.8-61.1-34.9-94.6-2.4-38.6 6.6-79.8 26.6-112.9 20.8-34.6 54.7-62.6 91.3-79.7 36-16.8 78.4-13.2 117.8-18.3 33.1-4.2 66.3-7.7 99.6-10 30.4-2.1 60.8-3.4 91.3-3.3 28.8 0 57.6 1.7 86.3 3.3 29.4 1.7 58.8 2.7 88 6.6C965.5 14.2 992.1 17.4 1017 26c25.3 8.7 51.1 19.1 71.8 36.1 22.2 18.2 42.5 41.3 53.1 68 15 37.7 19.8 81.4 11.6 121.2-6.9 34-26.2 65.9-49.8 91.3-17.9 19.4-41.2 35.1-66.4 43.2-38 12.1-80.6 13.9-119.5 5-26.3-6-50.9-20.5-71.2-38.3-25-22-47.6-49.7-58.3-81.2-11.7-34.6-11.7-74-3.3-109.5 7.2-30.6 23.8-59.6 44.8-83 18.8-21 40-34.1 69.7-48.1 17.6-8.3 78.6-17.2 118.3-20.5 43.2-3.6 78.2-8.1 117.4-9.4 34.8-1.1 69.7 0.3 104.6 1.7 34.3 1.4 68.7 2.9 102.9 6.6C1379 13 1416.3 14.6 1451 26c31.8 10.4 66.5 21.5 89.2 46 33.7 36.4 56.1 87.4 57.8 137 1.4 40.6-14.9 83-39.5 115.3-23.9 31.3-60.1 55.4-97.9 66.4-36.1 10.5-77.2 8.8-112.9-3.3-34.9-11.9-66.2-36.2-89.6-64.7-18.5-22.6-31.8-50.8-36.5-79.7-5.9-36.2-2.3-75.6 11.6-109.5 11.3-27.6 32.6-51.1 55.6-70.1 18.1-15 39.6-26.7 62.3-32.8C1383.2 21.8 1417.9 22 1451 26c38.8 4.6 75.2 21 112.4 32.8 55.2 17.5 109.8 36.9 164.3 56.4 41.7 15 83.3 30.3 124.5 46.6C1875 170.8 1920 190 1920 190" >
            </path>
        </svg> 
</div>

  1. 使用带有负值的 translate (x, y)

但是，部分图像将被裁剪。

  1. 使用前两个 viewBox 属性来移动图像。
    正值会将图像向左和向上移动。
    例如viewBox = "10 10 1920 399"

最好使用第一种方法，在 viewBox 中按比例增加，因为它不需要额外的设置

推荐阅读