Good day dear. Faced with a lack of understanding, where do indents between SVG elements come from and how will you get rid of them?

*{ margin: 0; padding: 0; } .row{ width: 100px; height: 1000px; background: linear-gradient(to top, red, blue); } svg, rect, mask, circle{ margin: 0; padding: 0; } 
 <div class="row"> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> </div>

Tell me please, who knows?

    2 answers 2

    I propose to get rid of the percentages in the mask and in other elements, so it will be easier to figure out what is coming from. Interest, of course, is a good thing in layout, but in the training example it is better to do without them. To do this, go to another model of the mask. Use the current coordinate system of the element to which the mask is applied.

     <mask id="circles" maskUnits="userSpaceOnUse">

    To shorten the code, we do not repeat the SVG code 10 times, but collect everything into one file. The mask is defined in the <defs>... </defs> once

     *{ margin: 0; padding: 0; } .row{ width: 100px; height: 1000px; background: linear-gradient(to top, red, blue); } svg, rect, mask, circle{ margin: 0; padding: 0; } svg { display: block; } 
     <div class="row"> <svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="1000" viewBox="0 0 100 1000"> <defs> <mask id="circles" maskUnits="userSpaceOnUse"> <g stroke="gray" stroke-width="4" fill="white"> <rect width="100" height="1000" fill="white"></rect> <g fill="black"> <circle cx="50" cy="50" r="45" /> <circle cx="50" cy="150" r="45" /> <circle cx="50" cy="250" r="45" /> <circle cx="50" cy="350" r="45" /> <circle cx="50" cy="450" r="45" /> <circle cx="50" cy="550" r="45" /> <circle cx="50" cy="650" r="45" /> <circle cx="50" cy="750" r="45" /> <circle cx="50" cy="850" r="45" /> <circle cx="50" cy="950" r="45" /> </g> </g> </mask> </defs> <rect x="0" y="0" width="100" height="1000" fill="#000" style="mask: url(#circles)"></rect> </svg> </div>

    Now you can flexibly adjust the distance between the circles. Perhaps upon further study, you will encounter another problem of indenting SVG images when inserting the latter into a text page. How to deal with indentation in this case is described in detail in this article.

       svg { display: block; } 

       *{ margin: 0; padding: 0; } .row{ width: 100px; height: 1000px; background: linear-gradient(to top, red, blue); } svg, rect, mask, circle{ margin: 0; padding: 0; } svg { display: block; } 
       <div class="row"> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> <svg viewBox="0 0 100 100"> <mask id="circles" maskUnits="objectBoundingBox"> <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> <circle cx="50%" cy="50%" r="45%" fill="black"></circle> </mask> <rect x="0" y="0" width="100%" height="100%" fill="#000" style="mask: url(#circles)"></rect> </svg> </div>

      PS: And in general, I gave the answer with one svg.

      • Thank you, was not attentive. And because of what they appear these indents, and why in this case also the width is set? What is the default display for SVG? -
      • one
        @ BlackStar1991, the default display is an inline-block with vertical-align: baseline . Accordingly, the entire space between the baseline and the bottom remains empty. I did not touch any width and did not understand what the question was about. - Qwertiy ♦