问题 不缩放到页面宽度

问题描述 投票:0回答:3

我的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>
html css svg
3个回答
0
投票

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

<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%;
}

0
投票

我对你的SVG进行了一些修改:我删除了widthheight;这样你的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>

我希望它有所帮助


0
投票

我会用背景和渐变做同样的事情然后你想要缩放问题:

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;
}
© www.soinside.com 2019 - 2024. All rights reserved.