如何使 div 容器水平对齐到中心？ [复制]

Question

只希望#container 居中。尝试了很多方法，但都失败了。

如何使用纯 CSS 使其居中？

body {
  text-align:center;
}

<div id="app">
<div id="container"><div id="container_red" style="position:absolute;left:0">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask0">
            <circle cx="202.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask0)">
            <circle cx="200" cy="200" r="200" fill="rgba(153,0,0,1)"></circle>
            <mask id="backcirclemask0">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask0)">
              <g id="rect-group0">
                <rect x="60" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div><div id="container_green" style="position:absolute;left:5px">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask1">
            <circle cx="197.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask1)">
            <circle cx="200" cy="200" r="200" fill="rgba(0,153,0,1)"></circle>
            <mask id="backcirclemask1">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask1)">
              <g id="rect-group1">
                <rect x="60" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div></div>
</div>

Answer 1

我使用 flex 将 svg 居中，希望对您有所帮助。

body {
  text-align:center;
  display : flex;
  justify-content:center;
  align-items:center;
  min-height: 100vh;
}

<div id="app">
<div id="container"><div id="container_red">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask0">
            <circle cx="202.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask0)">
            <circle cx="200" cy="200" r="200" fill="rgba(153,0,0,1)"></circle>
            <mask id="backcirclemask0">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask0)">
              <g id="rect-group0">
                <rect x="60" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(102,0,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(102,0,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div><div id="container_green">
        <svg style="opacity:1" class="noiseimg" width="400" height="400">
          <mask id="outlinemask1">
            <circle cx="197.5" cy="200" r="150" fill="#f00"></circle>
          </mask>
          <g mask="url(#outlinemask1)">
            <circle cx="200" cy="200" r="200" fill="rgba(0,153,0,1)"></circle>
            <mask id="backcirclemask1">
            <circle cx="200" cy="200" r="200" fill="#fff"></circle>
            </mask>
            <g mask="url(#backcirclemask1)">
              <g id="rect-group1">
                <rect x="60" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="30" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="200" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="140" y="370" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="220" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="170" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="310" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="140" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="340" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="200" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="390" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="170" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="60" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="0" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="120" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="90" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="70" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="150" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="300" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="290" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="130" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="40" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="190" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="50" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="260" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="360" y="280" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="380" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="320" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="310" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="80" y="340" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="250" y="360" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="380" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="40" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="120" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="210" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="390" y="70" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="330" y="260" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="30" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="20" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="300" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="60" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="190" y="50" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="350" y="250" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="20" y="100" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="90" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="100" y="0" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="370" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="320" y="240" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="10" y="350" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="330" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="280" y="270" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="110" y="130" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="220" y="80" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="290" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="240" y="10" width="10" height="10" fill="rgba(0,102,0,1)"></rect><rect x="230" y="160" width="10" height="10" fill="rgba(0,102,0,1)"></rect>
              </g>
            </g>
          </g>
        </svg>
      </div></div>
</div>