*响应速度* SVG图形,带油漆填充

时间:2018-08-23 11:33:55

标签: svg

是否可以像这样创建可缩放 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>

1 个答案:

答案 0 :(得分:1)

您不需要将SVG中的每个元素都用百分比表示。 SVG图形默认情况下是可缩放的,但是您需要包括一个viewBox属性来描述其坐标系。

viewBox属性采用四个值-viewBox="x_min y_min width height"-描述了SVG内部图形的范围。您通常会遇到类似viewBox='0 0 800 600'之类的东西,这意味着我已经在800x600“像素”的画布上绘制了东西,其原点为x = 0,y = 0

然后,当您将特定的widthheight设置为SVG时,默认情况下,它将拉伸以适合这些尺寸,但是您可以控制preserveAspectRatio属性的行为。

进一步阅读:这两个属性有一个good article on CSS Tricks