我的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>
将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%;
}
我对你的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>
我希望它有所帮助
我会用背景和渐变做同样的事情然后你想要缩放问题:
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;
}