我有一个有SVG的网站。为了使其看起来像设计师想要的，我不得不对其进行缩放（transform: scale()）。为了覆盖超出视口宽度的部分，我overflow-x: hidden在body标签上使用了。它适用于所有屏幕。但是在触摸屏设备上，它不起作用，<html>并且宽度超过<body>（您可以overflow-x: hidden在身体上向右滚动）。我尝试使用viewBox属性，但是我不太明白它是如何工作的。
另外，我试图申请width和max-width属性的SVG和路径-没有结果。
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>我该如何解决？
提前致谢
您具有正确的viewBox设置，其中SVG占据了浏览器窗口宽度的100％。这可以使用JS getBBox（）方法看到。在SVG标头中
使用很方便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) "图片会放大并向右和向下移动
有三种方法可以将其放回原位：
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>但是，部分图像将被裁剪。
viewBox = "10 10 1920 399"最好在viewBox中使用按比例增加的第一种方法，因为它不需要其他设置
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句