[英]can not make svg image half page
我有這個 svg 圖像代碼(因為它太長了我不會輸入腳本)問題是我不能把這個 svg 作為半封面,有什么幫助嗎?
<div class="container" style="width: 200%;"> <div class="row"> <svg width="794" height="571" viewBox="0 0 794 571" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="794" height="571" fill="#F6EAFF"/> </svg> </div> </div>
您可以使用 div 嵌套 svg 並在其上放置一個類。 通過這個類,您可以調整高度和寬度
非常簡單的例子:
.container-svg{ height: 100px; width: 100px; }
<div class="container" style="width: 200%;"> <div class="row"> <div class="container-svg" > <svg width="100%" height="571" viewBox="0 0 794 571" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="794" height="571" fill="#F6EAFF"/> </svg> </div </div> </div>
這將使 SVG 的容器占屏幕高度的 50%:
<div class="container" style="width: 100%">
<div class="row">
<svg
width="auto"
height="50vh"
viewBox="0 0 794 571"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect width="794" height="571" fill="#F6EAFF" />
</svg>
</div>
編輯:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<svg width="100%" height="100vh">
<rect width="100%" height="50vh" style="fill: rgb(226, 127, 33)" />
</svg>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.