是否可以创建这样的可扩展SVG图形？
可扩展的 SVG 图形我希望
它根据设备尺寸调整大小。我正在尝试创建一个使用整页尺寸的背景图像 - 而不是固定布局。
这就是我到目前为止想出的。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>New Design</title>
<style type="text/css">
html, body, div, span
{
margin:0;
padding:0;
border:0;
vertical-align: baseline;
}
body
{
font-family:'Roboto', Arial, Helvetica, sans-serif;
font-size:13px;
background-color:lightyellow;
}
html
{
height:100%;
}
body
{
min-height:100%;
position:relative;
}
#container
{
margin:0 auto;
background-color:#eceff1;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
path {
fill: blue;
}
</style>
</head>
<body>
<div id="container">
<div style="width:calc(100% - 100px);height:calc(100% - 100px);margin:0 auto;padding:10px;border:1px solid red;">
<svg height="100%" width="100%" style="border:1px solid #5A07BC;background-color:#fff">
<line x1="20%" y1="0" x2="50%" y2="200" style="stroke:#5A07BC;stroke-width:1" />
<line x1="50%" y1="200" x2="0" y2="450" style="stroke:#5A07BC;stroke-width:1" />
<line x1="100%" y1="20%" x2="60%" y2="60%" style="stroke:#2AA4C6;stroke-width:1" />
<line x1="60%" y1="60%" x2="95%" y2="100%" style="stroke:#2AA4C6;stroke-width:1" />
</div>
</div>
</body>
</html>您不需要让 SVG 中的每个元素都以百分比表示。默认情况下，SVG 图形是可缩放的，但您需要包含描述其坐标系的viewBox属性。
viewBox属性采用四个值(viewBox="x_min y_min width height"(，用于描述 SVG 内部绘图的范围。你通常会有类似viewBox='0 0 800 600'的东西，这意味着我在 800x600 "像素"的画布上画了东西，原点在 x = 0，y = 0。
然后，当您将特定width和height设置为 SVG 时，默认情况下，它将拉伸图像以适应这些尺寸，但您可以使用preserveAspectRatio属性控制行为。
延伸阅读：有一篇关于 CSS Tricks 的好文章关于这两个属性。