Question

我正在尝试在页面中间放置一个大的svg圆圈 - 水平和垂直。不工作，有什么提示吗？

这是我的代码 - 使用jade和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

你有太多的偏移和转换。

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>

Answer 2

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

尝试从徽标类

中删除内部样式

如何将Svg Circle放入页面中间

2 个答案: