html - 将 SVG 对齐到 sass 中的 div 的中心

Question

我在将我的 SVG 与圆心对齐时遇到问题，我应该怎么做？

我试过使用 imgs 代替 svgs，但质量大打折扣。此外，我已经尝试过堆栈溢出的答案并尝试使用这些解决方案但无济于事。

我有这个:

想要这个:

HTML

<div class="topics-container">
 <div class="row1">
        <div class="topic">
            <div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Cybersecurity and Social Engineering</div>
        </div>

        <div class="topic">
            <div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Virtual Reality</div>
        </div>
        .
        .
        .

 </div>
 <div class="row2"> 
        <div class="topic">
        .
        .
        .
        </div>
        .
        .
        .
 </div>
</div>

SASS:

.row1
  background: blue
  +display(flex)
  +align-items(center)


.row2
  background: red
  +display(flex)
  +align-items(center)

.topic
  display: block
  margin: auto

  [class^="icon-"]
  +size(100px)
  background: green
  border-radius: 50%

Answer 1

感谢您的帮助，我找到了一个解决方案，svg 文件没有与中心对齐，所以我不得不在 illustrator 中这样做。

步骤如下:

1. 创建一个新的 illustrator 文件，100 像素 x 100 像素
2. 将 svg 拖到空白处
3. 按下变换，将 x 和 y 设置为 50px

4.另存为.svg

1. 将 .svg 连接到代码
2. 重复，瞧

结果:

我使用的代码:萨斯:

.row1
  +display(flex)
  +align-items(center)

.row2
  padding-top: 150px
  +display(flex)
  +align-items(center)
  padding-bottom: 100px


.topic
  display: block
  margin: auto
  background: white

  [class^="icon-"]
  +size(150px)
  border-radius: 50%

.topic-name
  font-size: 20px
  font-style: bold
  text-align: center

HTML:(与问题相同)

<div class="topics-container">
 <div class="row1">
        <div class="topic">
            <div class="icon-cybersecurity"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Cybersecurity and Social Engineering</div>
        </div>

        <div class="topic">
            <div class="icon-vr"><svg>BLAHBLAHBLAH</svg></div>
            <div class="topic-name">Virtual Reality</div>
        </div>
        .
        .
        .

 </div>
 <div class="row2"> 
        <div class="topic">
        .
        .
        .
        </div>
        .
        .
        .
 </div>
</div>

我的 SVG 文件:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
      viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
<path d="M68.9,25c0,0-0.1,0-0.1,0c-0.5,0.1-0.8,0.5-0.8,1c0,1.9-0.9,3-2.5,4s-4,1.9-6.4,2.9s-4.9,2.3-6.8,4.4c-1.8,1.9-3,4.5-3.2,8
    c-1.8-0.1-2.9-0.7-4.1-1.4c-1.5-0.8-3.2-1.7-6-1.7c-1.7,0-3.3,1-4.9,2.5s-3.1,3.5-4.4,5.9C27,55.5,25,61.5,25,66.8
    c0,2.2,0.5,4.2,1.6,5.7c1,1.5,2.6,2.5,4.4,2.5c4.8,0,8.3-2.5,11.2-4.8s5.2-4.4,7.8-4.4s4.8,2,7.8,4.4C60.7,72.5,64.2,75,69,75
    c1.8,0,3.4-1,4.4-2.5c1-1.5,1.6-3.5,1.6-5.7c0-5.4-2-11.3-4.7-16.1c-1.3-2.4-2.8-4.4-4.4-5.9s-3.2-2.5-4.9-2.5c-2.8,0-4.5,0.9-6,1.7
    c-1.2,0.6-2.2,1.2-3.9,1.3c0.2-3,1.2-5,2.6-6.6c1.6-1.7,3.8-2.9,6.2-3.9c2.3-1,4.7-1.8,6.7-3.1s3.4-3.1,3.4-5.8c0-0.6-0.4-1-1-1.1
    C69,25,68.9,25,68.9,25z M39,44.4c2.4,0,3.6,0.6,5,1.4s3.2,1.7,6,1.7c0.1,0,0.2,0,0.3,0c0,0,0,0,0,0c2.6-0.1,4.3-0.9,5.7-1.7
    c1.5-0.8,2.6-1.4,5-1.4c0.9,0,2.2,0.6,3.5,1.9c1.4,1.3,2.8,3.2,4,5.4c2.5,4.5,4.4,10.2,4.4,15c0,1.9-0.5,3.5-1.2,4.5
    C71.1,72.4,70.2,73,69,73c-4.2,0-7.2-2.1-10-4.4c-2.8-2.3-5.5-4.8-9-4.8s-6.2,2.5-9,4.8S35.2,73,31,73c-1.2,0-2.1-0.5-2.8-1.6
    c-0.7-1.1-1.2-2.7-1.2-4.5c0-4.8,1.9-10.6,4.4-15c1.3-2.2,2.7-4.1,4-5.4C36.8,45,38.1,44.4,39,44.4z M62,51.5c-1.1,0-2,0.9-2,2
    s0.9,2,2,2s2-0.9,2-2S63.1,51.5,62,51.5z M37,52.6v3.1h-3v3.1h3v3.1h3v-3.1h3v-3.1h-3v-3.1H37z M58,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2
    s2-0.9,2-2S59.1,55.6,58,55.6z M66,55.6c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S67.1,55.6,66,55.6z M62,59.7c-1.1,0-2,0.9-2,2
    c0,1.1,0.9,2,2,2s2-0.9,2-2C64,60.6,63.1,59.7,62,59.7z"/>
</svg>