是否可以像这样创建可缩放 SVG图形?
Scalable SVG graphic
我希望它根据设备尺寸进行调整。我正在尝试创建将使用整个页面尺寸的背景图像-而不是固定的布局。
这是我到目前为止提出的。
<!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>
答案 0 :(得分:1)
您不需要将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
属性的行为。
进一步阅读:这两个属性有一个good article on CSS Tricks。