Question

我的SVG出现问题，我试图“改进”并更好地分隔网站上的不同部分，但是此SVG路径不想缩放到页面宽度，而是保持其大小不变固定。 svg元素可以缩放，但是路径保持不变... 我知道有一种方法可以使其正确缩放，您能在这方面帮助我吗？

svg {
  background: gold;
}

<svg version="1.1" width="100%" height="150" viewBox="800 -50 200 200">
	<path d="M0 107 L220 69 L484 135 L800 82 L800 150 L0 150 Z" />
</svg>

Answer 1

我会对背景和渐变进行同样的操作，然后您想要缩放比例问题：

body {
  margin: 0;
  height: 100vh;
  background: 
   linear-gradient(to bottom right, transparent 49%, #000 50%) -80px calc(100% - 20px)/calc(100%/3 + 81px) 80px, 
   linear-gradient(to bottom left , transparent 49%, #000 50%)  50% calc(100% - 20px)/calc(100%/3) 80px, 
   linear-gradient(to bottom right, transparent 49%, #000 50%) 100% calc(100% - 20px)/calc(100%/3) 50px, 
   linear-gradient(#000, #000) bottom/100% 20px;
  background-color: yellow;
  background-repeat: no-repeat;
}

使用简单代码的另一种方法：

body {
  position:relative;
  margin: 0;
  height: 100vh;
  overflow:hidden;
  background-color: yellow;
}
body:after {
 content:"";
 position:absolute;
 bottom:0;
 height:80px;
 right:-80px;
 left:-80px;
 border-bottom:20px solid #000;
 background: 
   linear-gradient(to bottom right, transparent 49%, #000 50%) left, 
   linear-gradient(to bottom left , transparent 49%, #000 50%) center, 
   linear-gradient(to bottom right, transparent 49%, #000 50%) right;
  background-size:calc(100%/3) 100%;
  background-repeat: no-repeat;
}

Answer 2

将width元素上的svg属性更改为绝对值，而不是基于百分比的值。如果将宽度设置为100%，则将缩放文档的边界，而不是缩放 document 。

<svg version="1.1" width="150" height="150" viewBox="800 -50 200 200">
    <path d="M0 107 L220 69 L484 135 L800 82 L800 150 L0 150 Z" />
</svg>

然后，使用CSS应用宽度缩放：

svg {
  background: gold;
  width: 100%;
}

Answer 3

我对您的SVG进行了一些更改：我删除了width和height；这样，您的svg将随窗口缩放。另外，我更改了您的viewBox，因为它看起来很奇怪。请记住，viewBox应该如下所示：viewBox(from_x from_y width height)

svg {
  background: gold;
}

<svg version="1.1" viewBox="0 0 800 200">
	<path d="M0,107 L220,69 L484,135 L800,82 L800,150 L0,150 Z" />
</svg>

我希望对您有帮助

<svg>不能缩放到页面宽度的问题

3 个答案: