如何將Svg Circle放入頁面中間

Question

我試圖在頁面中間放置一個大的svg圓圈 - 水平和垂直。不工作，任何提示？

這裏是我的代碼 - 使用玉和SCSS：

玉：

 .logo 
     svg.logo__svg 
      circle(
       r=300 
       style="fill:none;stroke:white;stroke-width:1;") 

SCSS：

.logo{ 
     height: 80%; 
     width: 80%; 

     position: relative; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 

     @include element('svg'){ 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
     height: 100%; 
     width: 100%; 
    } 
    } 

Answer 1

.logo 
    svg.logo__svg(width='100', height='100') 
    circle(cx='50%', cy='50%', r='10') 

嘗試從標識類中刪除內部風格

Answer 2

你也有許多偏移和變換。

body { 
 
    margin: 0; 
 
    background-color: rebeccapurple; 
 
} 
 

 
.logo { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 

 
.logo__svg { 
 
    width: 402px; 
 
    height: 402px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="logo"> 
 

 
    <svg class="logo__svg"> 
 
    <circle cx="50%" cy="50%" r="200" style="fill:none;stroke:white;stroke-width:1;"/> 
 
    </svg> 
 
    
 
</div>