如何阻止SVG破坏CSS网格布局？

Question

每当我将SVG插入到我的网格布局中时，1)就不会居中，而2)会破坏网格的布局。我如何修复这个问题，使播放图标显示的方式与播放文本一样。

下面是正在打破的布局：

​

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.center_children { display: flex; justify-content: center; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%); 
display:grid; grid-template-rows: 2fr 1fr; gap: 1.5rem;
}

<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">Play</div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

<br /><br />

<div class="body">
<br />
<div class="timer">
    <div class="center_children">
        <div class="play">
            <svg width="100%" height="100%" viewBox="0 0 100 100" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
        </div>
    </div>
    <div class="center_children">1:39</div>
</div>
<br />
</div>

​

Answer 1

下面是代码中的问题：

alignment.

• fr
• 您还没有指定的宽度和高度，它们都是网格行和列，所以当svg增长时，就会将网格从预期的单元中推开，这是可用空间的一部分。它们将根据您的内容移动。如果您希望将行固定在33%和66%，那么您必须使用fr.
• You而不是%来调整列的中心位置。如果您想要显示整个图像，则不需要为SVG指定一个
• 。您不理解viewport与viewBox (请阅读viewBox)

下面是修正的代码(添加一些填充以使事物看起来更完美相对于圆圈)：

​

.body { background-color: hsl(0,0%,10%); color: white; font-size: 32px; }
.timer
{
width: 12rem; height: 12rem; border-radius: 50%;
background-color: hsl(0, 50%, 50%); 
display:grid; grid-template-rows: 66% 33%; 
grid-template-columns: 5rem;
justify-content: center;
}

<div class="body">
<div class="timer">
    <div class="play">
        <svg width="100%" height="100%" ><polygon points="0,0 75,50 0,100" style="fill:#fff;" /></svg>
    </div>
    <div>1:39</div>
</div>
</div>

​