<use>标记在<svg>标记中未正确对齐

Question

我无法收到<svg>和＆＃39;＆＃39;标签在指定的空间中正确对齐。我使用CSS Grid定义了区域，并且在将grid-area属性应用于<div>时，它们都按预期显示。我拍了一些截图来说明我的意思。

这里是屏幕上当前图标的样子。请注意，第一个图标与容器左侧对齐，而另外两个图标与中间对齐。我为svg所在的<a>标签添加了灰色背景，以使它们可见。

这是第一个图标以及检查器中突出显示的区域。这两个和标签都匹配。

这是第二个图标，由于某种原因，标签会向右移动。

第三个图标完全相同。

我正在创建一个到目前为止看起来像这样的SVG精灵

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">

    <symbol viewbox="0 0 79 146" id="illustration_icon">...</symbol>
    <symbol viewBox="0 0 180 146" id="content_icon">.......</symbol>
    <symbol viewBox="0 0 84 146" id="get_started_icon">....</symbol>

</svg>

容器的HTML目前看起来像这样。

<div class="linkArea">

    <a class="firstLink linkIcon" style="background-color: #333;">
        <svg class="iconArea">
            <use class="iconSvg" xlink:href="assets/symbol_sprite.svg#illustration_icon"></use>
        </svg>
        <p class="titleArea">Illustration Design</p>
    </a>

    <a class="scndLink linkIcon" style="background-color: #888;">
        <svg class="iconArea">
            <use class="iconSvg" xlink:href="assets/symbol_sprite.svg#content_icon"></use>
        </svg>
        <p class="titleArea">Content Design</p>
    </a>

    <a class="thirdLink linkIcon" style="background-color: #333;">
        <svg class="iconArea">
            <use class="iconSvg" xlink:href="assets/symbol_sprite.svg#get_started_icon"></use>
        </svg>
        <p class="titleArea">Getting Started Design</p>
    </a>

</div>

Css看起来像这样

.linkArea{
    z-index: 112;
    display: grid;
    grid-template-columns: [first-col-start] 1fr [first-col-end scnd-col-start] 1fr [scnd-col-end third-col-start] 1fr [third-col-end];
    grid-template-rows: [link-content-row-start] 1fr [link-content-row-end];
}

.linkIcon{
    display: grid;
    fill: #414D51;
    grid-template-columns: 1fr;
    grid-template-rows: 70% 30%;
    grid-template-areas:  "icon"  "title";
 }

.firstLink{ grid-area: link-content-row-start/first-col-start/link-content-row-end/first-col-end; }

.scndLink{ grid-area: link-content-row-start/scnd-col-start/link-content-row-end/scnd-col-end; }

.thirdLink{ grid-area: link-content-row-start/third-col-start/link-content-row-end/third-col-end; }

.iconArea{
    grid-area: icon;
    display: grid;
    grid-template-rows: [icon-row-start] 1fr [icon-row-end];
    grid-template-columns: [icon-col-start] 1fr [icon-col-end];
    /*grid-template-rows: 1fr;
    grid-template-columns: 1fr;*/
}

.iconSvg{
    grid-area: icon-row-start/icon-col-start/icon-row-end/icon-col-end;
}

@media screen and (min-width: 301px) and (max-width: 500px){
    .linkArea{ grid-area: scnd-third-row 1/first-third-col 1/scnd-third-row 22/third-third-col 34; }
}

@media screen and (min-width:501px) and (max-width: 700px){
    .linkArea{ grid-area: scnd-third-row 13/first-third-col 1/third-third-row 1/third-third-col 34; }
}

@media screen and (min-width: 701px) and (max-width: 2200px){
    .linkArea{ grid-area: third-third-row 1/first-third-col 11/third-third-row 27/third-third-col 23; }
}

我尝试在<svg>标记中包装<div>标记并应用.linkArea类，可能会将网格属性应用于SVG元素时出现问题。当我一起替换svg标签时，所有内容都排成一行并按预期运行。有人知道为什么会这样吗？如果您希望更好地了解正在发生的事情，请Plunker。