如何折叠SVG元素？

Question

我试图通过删除文本并仅在某个断点处显示标记但是遇到问题来响应SVG徽标。我使用display：none;要成功隐藏徽标的文字，但SVG的全宽仍在显示，留下仍然可点击的空白区域（徽标是锚点）。

相对较新的SVG，并想知道是否有办法隐藏/折叠文本，以便宽度也减少到徽标的标记。建议非常感谢。

以下是Codepen演示此问题：http://codepen.io/anon/pen/LVXLmN

.logo {
    height: 100px;
}

.logo__text {
    display: none;
}

@media only screen and (min-width: 620px) {

    .logo__text {
        display: inline-block
    }

}