Question

试图在整个屏幕（背景）中使用水平和垂直线。两行之间的距离将为3个像素。

代码是：

  <!doctype html>
    <html>
        <head>
            <title>Ζωγραφίζοντας ένα γραφείο</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <link rel="StyleSheet" href="style.css" type="text/css" media="screen">
            <script type="text/javascript" src="script.js"></script>
        </head>
        <body>
            <!-- svg path for background -->
            <svg width="0" height="0">
                <path d="" stroke="#ccc" stroke-width="1" fill="none"/>
            </svg>
            <section>
            </section>
        </body>
    </html>

    *{
        margin:0;
        padding:0;
    }

    html, body {
        width:100%;
        height: 100%;
    }

    section{
        position:absolute;
        z-index:2;
        top:0px;
        left:0px;
    }

    var svg_1;
    var background_path;
    var window_height,window_width;
    var i;
    var d_for_path="";
    document.addEventListener('DOMContentLoaded', function(){ 
        svg_1 = document.getElementsByTagName("svg")[0];
        background_path = document.getElementsByTagName("path")[0];

        window_height = window.innerHeight;
        window_width = window.innerWidth;

        var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = parseFloat(w.innerWidth) || parseFloat(e.clientWidth) || parseFloat(g.clientWidth),
        y = parseFloat(w.innerHeight) || parseFloat(e.clientHeight)|| parseFloat(g.clientHeight);
        x = x-1;
        y = y-3;

        //make svg_1 as big as possible
        svg_1.setAttribute("width",x+"px");
        svg_1.setAttribute("height",y+"px");

        //draw horizontal lines
        for(i=0;i<=y;i=i+3){
            d_for_path+= "M 0 "+i+",H "+x+",";
        }
        //draw vertical line
        for(i=0;i<=x;i=i+3){
            d_for_path+= "M "+i+" 0,V "+y+",";
        }
        background_path.setAttribute("d",d_for_path);

    }, false);

上面的代码有什么问题？为什么必须减少x，y变量？

预先感谢，克里斯·帕帕斯（Chris Pappas）

*我在Firefox浏览器中看不到这些行。

Answer 1

您也可以将CSS用于此类用途。

HTML, body {
  height: 100px;
  width: 100%;
}

#small {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: rgb(50, 50, 50);
  background-image: 
      linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), 
      linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent);
  background-size: 3px 3px;
}

#big {
  display: inline-block;
  height: 100px;
  width: 100px;
  background-color: rgb(50, 50, 50);
  background-image: 
      linear-gradient(rgb(202, 202, 202) 50%, transparent 50%, transparent), 
      linear-gradient(90deg, rgb(202, 202, 202) 50%, transparent 50%, transparent);
  background-size: 30px 30px;
}

<!doctype html>
<html>
  <head>
    <title>Site</title>
  </head>
  <body>
    <label>Scale: small</label>
    <div id="small"></div>
    <label>Scale: big</label>
    <div id="big"></div>
  </body>
</html>

是的，它在Google Chrome浏览器上看起来更好（至少对我而言）让我知道它是否仍然对您有用。祝你有美好的一天，Elias：）

Answer 2

仅使用CSS即可找到解决方案

html, body { margin:0; padding:0; overflow:hidden }
svg { position:fixed; top:0; left:0; height:100%; width:100% }

喷泉：在How to scale SVG image to fill browser window?中回答

窗口innerWidth，innerHeight问题

2 个答案: