内联SVG不在IE上显示

Question

我创建了一个嵌入到页面中的内嵌SVG，用作一些自定义图标。在测试中，Chrome，FF和Safari中的图标显示正常，但它们并未出现在IE中。

研究问题不是因为页面没有以标准模式显示。我试图直接在SVG上设置宽度和高度，正如其他人所建议的那样。

我使用示例标记和样式表创建了一个codepen：http://codepen.io/anon/pen/wMLqgZ。

   <div style="height: 0; width: 0; position: absolute; visibility: hidden">
              <!-- inject:svg --><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path><path id="a" d="M0 0h129v129H0z"></path></defs><symbol id="brick-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path class="brick-path" clip-path="url(#b)" fill="#fff" d="M66.1 73.8H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.3c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H66.1zM90.4 73.8H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h10.1c.3 0 .5-.2.5-.5V74.3c.1-.3-.2-.5-.4-.5M37.8 86.4h10.1c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M51.9 55.2h24.2c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M80.2 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M37.8 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M90.9 58.7c0-.3-.2-.5-.5-.5H66.1c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.2c.3 0 .5-.2.5-.5V58.7zM37.8 70.8H62c.3 0 .5-.2.5-.5V58.7c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5"></path><path class="brick-path" clip-path="url(#b)" fill="#bf1e2e" d="M64.1 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2S7.8 33.4 7.8 64.5s25.2 56.2 56.3 56.2"></path><path class="brick-path" clip-path="url(#b)" fill="#fff" d="M90.9 58.7v11.6c0 .3-.2.5-.5.5H66.1c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h24.2c.3 0 .6.2.6.5M47.9 58.2H62c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h10.1zM37.3 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5M51.4 85.9V74.3c0-.3.2-.5.5-.5h24.2c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H51.9c-.2 0-.5-.2-.5-.5M79.7 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H80.2c-.2 0-.5-.2-.5-.5M90.9 43.1v11.6c0 .3-.2.5-.5.5H80.2c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .6.2.6.5M76.7 54.7c0 .3-.2.5-.5.5H51.9c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h24.3c.3 0 .5.2.5.5v11.6zM48.4 54.7c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6z"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="brick" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path class="brick-path" clip-path="url(#b)" fill="#231F20" d="M66.1 73.8H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.3c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H66.1zM90.4 73.8H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h10.1c.3 0 .5-.2.5-.5V74.3c.1-.3-.2-.5-.4-.5M37.8 86.4h10.1c.3 0 .5-.2.5-.5V74.3c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M51.9 55.2h24.2c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H51.9c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M80.2 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H80.2c-.3 0-.5.2-.5.5v11.6c0 .3.3.5.5.5M37.8 55.2h10.1c.3 0 .5-.2.5-.5V43.1c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5M90.9 58.7c0-.3-.2-.5-.5-.5H66.1c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5h24.2c.3 0 .5-.2.5-.5V58.7zM37.8 70.8H62c.3 0 .5-.2.5-.5V58.7c0-.3-.2-.5-.5-.5H37.8c-.3 0-.5.2-.5.5v11.6c0 .3.2.5.5.5"></path><path class="brick-path" clip-path="url(#b)" fill="#FFF" d="M64.1 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2S7.8 33.4 7.8 64.5s25.2 56.2 56.3 56.2"></path><path class="brick-path" clip-path="url(#b)" fill="#231F20" d="M90.9 58.7v11.6c0 .3-.2.5-.5.5H66.1c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h24.2c.3 0 .6.2.6.5M47.9 58.2H62c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V58.7c0-.3.2-.5.5-.5h10.1zM37.3 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5M51.4 85.9V74.3c0-.3.2-.5.5-.5h24.2c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H51.9c-.2 0-.5-.2-.5-.5M79.7 85.9V74.3c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6c0 .3-.2.5-.5.5H80.2c-.2 0-.5-.2-.5-.5M90.9 43.1v11.6c0 .3-.2.5-.5.5H80.2c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .6.2.6.5M76.7 54.7c0 .3-.2.5-.5.5H51.9c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h24.3c.3 0 .5.2.5.5v11.6zM48.4 54.7c0 .3-.2.5-.5.5H37.8c-.3 0-.5-.2-.5-.5V43.1c0-.3.2-.5.5-.5h10.1c.3 0 .5.2.5.5v11.6z"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="design-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" class="circle-fill" fill="#bf1e2e" d="M64.5 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2-31.1 0-56.2 25.1-56.2 56.2s25.1 56.2 56.2 56.2M48.2 87.9l-2.4-2.4 13.7-13.7 2.4 2.4-13.7 13.7zm-4.5-4.5l-3.1-3.1 13.7-13.7 3.1 3.1-13.7 13.7zm22.5-9.2l-1.1-1.1L64 72l-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-3-3-.8-.8 2.6-2.6 1.4 1.4 2.3 2.3 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.6 2.6-13.6-13.6zm20 11.7l3.5-3.5 3.8 3.8-7.6 7.6-3.8-3.8 3.3-3.3m8-50.3l-3 6.7-3.8-3.8 6.8-2.9zm-9.8 4.2L89 46l-1.8 4-7.7-7.7 4.1-1.7zm-.8 12.8l-2 2-1.1 1.1-1.1 1.1-4.9 4.9-2.3-2.5 4.9-4.9 1.1-1.1 1.1-1.1 2.6-2.6 1.2-1.2 2.4 2.4-1.9 1.9zm1.7 2.5l-.1.2V56l.1-.1zm-13.4-6l1.1-1.1 1.1-1.1L77 44l.6.6L80 47l-.6.6-3.1 3.1-1.1 1.1-1.1 1.2-4.9 4.9-3.1-3.1 5-4.9zm-17.2-3.2l1.1 1.1 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.8 2.8-14-14-1.1-1.1-1.1-1.1-2.3-2.2-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-1.8-1.8-2-2 2.8-2.8 2.9 2.8zm-5-4.5l-7.1 7.1-1.3-3 5.4-5.4 3 1.3zM43 39.5l-3.8 3.8-2.9-6.8 6.7 3zm-4.5 43l7.6 7.6-3.8 3.8-7.6-7.6 3.8-3.8z"></path><path clip-path="url(#b)" fill="#FFF" d="M84.5 55.9l-.1.1v.1z"></path><path transform="rotate(45 40.432 88.153)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M35.1 85.5h10.7v5.3H35.1z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M93.4 36.4l-6.8 2.9 3.7 3.8zM89 46l-5.4-5.4-4.1 1.7 7.7 7.7zM74.1 53l1.1-1.1 1.1-1 3.1-3.2.6-.6-2.4-2.4-.6-.7-3.8 3.8-1.1 1.1-1 1-4.9 4.9 3.1 3.1z"></path><path transform="rotate(-135 49.056 75.03)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M46.9 65.3h4.3v19.4h-4.3z"></path><path transform="rotate(135 53.904 79.877)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M44.2 78.2h19.4v3.4H44.2z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M82.2 49.2L81 50.4 78.4 53l-1.1 1.1-1 1-4.9 4.9 2.4 2.4 4.8-4.9 1.1-1.1 1.1-1 2-2 1.7-1.8z"></path><path transform="rotate(45 87.738 88.152)" clip-path="url(#b)" class="design-poly" fill="#fff" d="M85.1 82.8h5.3v10.7h-5.3z"></path><path clip-path="url(#b)" class="design-poly" fill="#fff" d="M43 39.5l-6.7-3 2.9 6.8zM41.8 49.2l7.1-7-3-1.4-5.4 5.4zM64.1 72.1l1 1 1.1 1.1 13.7 13.7 2.7-2.6-13.8-13.7-1-1.1-1.1-1.1-2.4-2.3-2.1-2.1-3.1-3.1-1-1.1-1.1-1-4.9-4.9-1-1.1-1.1-1-2.3-2.4-1.4-1.4-2.7 2.6.8.8 3 3 1.1 1 1 1.1 4.9 4.9 1 1 1.1 1.1 3.1 3.1 2.1 2.1zM50.3 48.8l1.8 1.8 1.1 1.1 1.1 1.1 4.8 4.8 1.1 1.1 1.1 1.1 3 3 2.2 2.2 2.3 2.3 1.1 1.1 1 1 13.8 13.8 2.8-2.8-13.7-13.8-1.1-1-1-1.1-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1-1-1.1-4.9-4.9-1.1-1-1-1.1-1.1-1.1-2.7-2.7-2.8 2.9z"></path><circle class="design-circle" clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="design" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" class="circle-fill" fill="#FFF" d="M64.5 120.7c31.1 0 56.2-25.2 56.2-56.2 0-31.1-25.2-56.2-56.2-56.2-31.1 0-56.2 25.1-56.2 56.2s25.1 56.2 56.2 56.2M48.2 87.9l-2.4-2.4 13.7-13.7 2.4 2.4-13.7 13.7zm-4.5-4.5l-3.1-3.1 13.7-13.7 3.1 3.1-13.7 13.7zm22.5-9.2l-1.1-1.1L64 72l-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-3-3-.8-.8 2.6-2.6 1.4 1.4 2.3 2.3 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.6 2.6-13.6-13.6zm20 11.7l3.5-3.5 3.8 3.8-7.6 7.6-3.8-3.8 3.3-3.3m8-50.3l-3 6.7-3.8-3.8 6.8-2.9zm-9.8 4.2L89 46l-1.8 4-7.7-7.7 4.1-1.7zm-.8 12.8l-2 2-1.1 1.1-1.1 1.1-4.9 4.9-2.3-2.5 4.9-4.9 1.1-1.1 1.1-1.1 2.6-2.6 1.2-1.2 2.4 2.4-1.9 1.9zm1.7 2.5l-.1.2V56l.1-.1zm-13.4-6l1.1-1.1 1.1-1.1L77 44l.6.6L80 47l-.6.6-3.1 3.1-1.1 1.1-1.1 1.2-4.9 4.9-3.1-3.1 5-4.9zm-17.2-3.2l1.1 1.1 1.1 1.1 1.1 1.1 4.9 4.9 1.1 1.1 1.1 1.1 3.1 3.1 2.1 2.1 2.4 2.4 1.1 1.1 1.1 1.1 13.7 13.7-2.8 2.8-14-14-1.1-1.1-1.1-1.1-2.3-2.2-2.1-2.1-3.1-3.1-1.1-1.1-1.1-1.1-4.9-4.9-1.1-1.1-1.1-1.1-1.8-1.8-2-2 2.8-2.8 2.9 2.8zm-5-4.5l-7.1 7.1-1.3-3 5.4-5.4 3 1.3zM43 39.5l-3.8 3.8-2.9-6.8 6.7 3zm-4.5 43l7.6 7.6-3.8 3.8-7.6-7.6 3.8-3.8z"></path><path clip-path="url(#b)" fill="#FFF" d="M84.5 55.9l-.1.1v.1z"></path><path transform="rotate(45 40.432 88.153)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M35.1 85.5h10.7v5.3H35.1z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M93.4 36.4l-6.8 2.9 3.7 3.8zM89 46l-5.4-5.4-4.1 1.7 7.7 7.7zM74.1 53l1.1-1.1 1.1-1 3.1-3.2.6-.6-2.4-2.4-.6-.7-3.8 3.8-1.1 1.1-1 1-4.9 4.9 3.1 3.1z"></path><path transform="rotate(-135 49.056 75.03)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M46.9 65.3h4.3v19.4h-4.3z"></path><path transform="rotate(135 53.904 79.877)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M44.2 78.2h19.4v3.4H44.2z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M82.2 49.2L81 50.4 78.4 53l-1.1 1.1-1 1-4.9 4.9 2.4 2.4 4.8-4.9 1.1-1.1 1.1-1 2-2 1.7-1.8z"></path><path transform="rotate(45 87.738 88.152)" clip-path="url(#b)" class="design-poly" fill="#231F20" d="M85.1 82.8h5.3v10.7h-5.3z"></path><path clip-path="url(#b)" class="design-poly" fill="#231F20" d="M43 39.5l-6.7-3 2.9 6.8zM41.8 49.2l7.1-7-3-1.4-5.4 5.4zM64.1 72.1l1 1 1.1 1.1 13.7 13.7 2.7-2.6-13.8-13.7-1-1.1-1.1-1.1-2.4-2.3-2.1-2.1-3.1-3.1-1-1.1-1.1-1-4.9-4.9-1-1.1-1.1-1-2.3-2.4-1.4-1.4-2.7 2.6.8.8 3 3 1.1 1 1 1.1 4.9 4.9 1 1 1.1 1.1 3.1 3.1 2.1 2.1zM50.3 48.8l1.8 1.8 1.1 1.1 1.1 1.1 4.8 4.8 1.1 1.1 1.1 1.1 3 3 2.2 2.2 2.3 2.3 1.1 1.1 1 1 13.8 13.8 2.8-2.8-13.7-13.8-1.1-1-1-1.1-2.4-2.4-2.1-2.1-3.1-3.1-1.1-1-1-1.1-4.9-4.9-1.1-1-1-1.1-1.1-1.1-2.7-2.7-2.8 2.9z"></path><circle class="design-circle" clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="house-active" viewBox="0 0 129 129"><path fill="#bf1e2e" d="M43.1 45.1l5.2-2.7v-4.5H43v7.2zM43 92.3h13.5V78.2h17.2v14.1h13.5V56.5H43v35.8zm27.7-27.8h10v10h-10v-10zm-21.2 0h10v10h-10v-10zM90.2 50.7l-1.5-.8-1.5-.8-1.8-1-2.8-1.5-2.9-1.5-15.1-7.9-13.3 7-1.5.8-.3.1-1.2.7-1.6.8-2.9 1.5-.8.5-1.5.8-1.5.8-6.3 3.3h61.8z"></path><path fill="#bf1e2e" d="M52.5 67.5h4v4h-4zM73.7 67.5h4v4h-4zM59.5 81.2h11.2v11.1H59.5z"></path><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#bf1e2e" d="M64.6 8.3c-31 0-56.2 25.1-56.2 56.2s25.2 56.2 56.2 56.2 56.2-25.2 56.2-56.2c.1-31.1-25.1-56.2-56.2-56.2"></path><path clip-path="url(#b)" fill="#fff" d="M90.2 53.5H33.7l6.3-3.3 1.5-.8 1.5-.8.8-.5 2.9-1.5 1.6-.8 1.2-.7.3-.1 1.5-.8 13.3-7 15.1 7.9 2.9 1.5 2.8 1.5 1.8 1 1.5.8 1.5.8 5.3 2.8zM59.5 81.2h11.2v11.1H59.5zM43 37.9h5.3v4.5l-5.2 2.7H43z"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle><path clip-path="url(#b)" fill="#fff" d="M73.7 67.5h4v4h-4zM52.5 67.5h4v4h-4z"></path><path clip-path="url(#b)" fill="#fff" d="M43 56.5v35.8h13.5V78.2h17.2v14.1h13.5V56.5H43zm16.5 18h-10v-10h10v10zm21.1 0h-10v-10h10v10z"></path></symbol><symbol id="house" viewBox="0 0 129 129"><path fill="#FFF" d="M43.1 45.1l5.2-2.7v-4.5H43v7.2zM43 92.3h13.5V78.2h17.2v14.1h13.5V56.5H43v35.8zm27.7-27.8h10v10h-10v-10zm-21.2 0h10v10h-10v-10zM90.2 50.7l-1.5-.8-1.5-.8-1.8-1-2.8-1.5-2.9-1.5-15.1-7.9-13.3 7-1.5.8-.3.1-1.2.7-1.6.8-2.9 1.5-.8.5-1.5.8-1.5.8-6.3 3.3h61.8z"></path><path fill="#FFF" d="M52.5 67.5h4v4h-4zM73.7 67.5h4v4h-4zM59.5 81.2h11.2v11.1H59.5z"></path><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FFF" d="M64.6 8.3c-31 0-56.2 25.1-56.2 56.2s25.2 56.2 56.2 56.2 56.2-25.2 56.2-56.2c.1-31.1-25.1-56.2-56.2-56.2"></path><path clip-path="url(#b)" fill="#231F20" d="M90.2 53.5H33.7l6.3-3.3 1.5-.8 1.5-.8.8-.5 2.9-1.5 1.6-.8 1.2-.7.3-.1 1.5-.8 13.3-7 15.1 7.9 2.9 1.5 2.8 1.5 1.8 1 1.5.8 1.5.8 5.3 2.8zM59.5 81.2h11.2v11.1H59.5zM43 37.9h5.3v4.5l-5.2 2.7H43z"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle><path clip-path="url(#b)" fill="#231F20" d="M73.7 67.5h4v4h-4zM52.5 67.5h4v4h-4z"></path><path clip-path="url(#b)" fill="#231F20" d="M43 56.5v35.8h13.5V78.2h17.2v14.1h13.5V56.5H43zm16.5 18h-10v-10h10v10zm21.1 0h-10v-10h10v10z"></path></symbol><symbol id="machine-active" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#bf1e2e" d="M64.1 8.3C33 8.3 7.8 33.4 7.8 64.5S33 120.7 64 120.7c31.1 0 56.2-25.2 56.2-56.2S95.1 8.3 64.1 8.3m35.1 79.2h-28c-.6.1-1.1 0-1.7 0H36.4c-5.1 0-9.2-4-9.2-9.1 0-2 .7-3.8 1.8-5.4V59.5h9.8c.8 0 1.2-.7 1.2-1.5V41.5h19l7 20c.2.6.8 1 1.4 1H75v8.7c.5.4 1 .9 1.4 1.4l7.2-5.6c.5-.3 1.1-.4 1.6-.2s.8.8.8 1.3.4 13.5 13.5 16.4c.7.2 1.3.9 1.2 1.6s-.7 1.4-1.5 1.4"></path><path clip-path="url(#b)" fill="#bf1e2e" d="M83.4 71L78 75.2c.4 1 .6 2.1.6 3.3 0 2.3-.9 4.4-2.3 6h15.4c-5.7-3.9-7.6-10-8.3-13.5M75.1 76c0-.1 0-.1-.1-.2-.2-.5-.6-1-.9-1.4-1.1-1.3-2.8-2-4.6-2H36.4c-3.4 0-6.2 2.7-6.2 6.1 0 .7.1 1.3.3 1.9.8 2.4 3.1 4 5.8 4H70c-.2 0-.5.1-.7.2h.1c.5 0 1-.1 1.4-.2h.1c2.7-.7 4.6-3.1 4.6-6 0-.5-.1-1-.2-1.5 0-.3-.1-.6-.2-.9m-36.3 4.5c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.1.9-.6 1.7-1.3 2.2m10.3 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.7 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.6 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8 1.5 0 2.8 1.2 2.8 2.8-.2.9-.6 1.7-1.3 2.2m4.1-5.1c0 .3.1.7.3 1-.2-.3-.3-.6-.3-1M49 48.5h9v8h-9z"></path><path clip-path="url(#b)" fill="#fff" d="M36.4 87.5h33.1c.6 0 1.2.1 1.7 0h28.1c.8 0 1.4-.6 1.5-1.3.1-.8-.4-1.5-1.2-1.6-13.1-2.9-13.5-15.8-13.5-16.4 0-.6-.3-1.1-.8-1.3-.5-.2-1.1-.2-1.6.2l-7.2 5.6c-.4-.5-.9-1-1.4-1.4v-8.7h-7.5c-.6 0-1.2-.4-1.4-1l-7-20H40V58c0 .8-.4 1.5-1.2 1.5H29v13.6c-1.1 1.5-1.8 3.3-1.8 5.4 0 5 4.1 9 9.2 9m-6.2-8.9c0-3.4 2.8-6.1 6.2-6.1h33.1c1.9 0 3.5.7 4.6 2 .4.4.7.9.9 1.4 0 .1.1.1.1.2.1.3.3.6.3 1 .1.5.2 1 .2 1.5 0 2.9-2 5.3-4.6 6h-.1c-.5.1-.9 0-1.4 0H36.4c-2.7 0-5-1.6-5.8-4-.3-.7-.4-1.3-.4-2M83.4 71c.7 3.5 2.6 9.6 8.4 13.5H76.4c1.4-1.6 2.3-3.7 2.3-6 0-1.2-.2-2.3-.6-3.3l5.3-4.2zM49 48.5h9v8h-9v-8z"></path><path clip-path="url(#b)" fill="#fff" d="M35.5 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.7 1.7 1.3 2.2M45.8 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.1.9.6 1.7 1.3 2.2M56 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2M66.2 80.5c.5.3 1 .6 1.6.6.6 0 1.2-.2 1.6-.6.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2"></path><circle clip-path="url(#b)" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol><symbol id="machine" viewBox="0 0 129 129"><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" fill="#FFF" d="M64.1 8.3C33 8.3 7.8 33.4 7.8 64.5S33 120.7 64 120.7c31.1 0 56.2-25.2 56.2-56.2S95.1 8.3 64.1 8.3m35.1 79.2h-28c-.6.1-1.1 0-1.7 0H36.4c-5.1 0-9.2-4-9.2-9.1 0-2 .7-3.8 1.8-5.4V59.5h9.8c.8 0 1.2-.7 1.2-1.5V41.5h19l7 20c.2.6.8 1 1.4 1H75v8.7c.5.4 1 .9 1.4 1.4l7.2-5.6c.5-.3 1.1-.4 1.6-.2s.8.8.8 1.3.4 13.5 13.5 16.4c.7.2 1.3.9 1.2 1.6s-.7 1.4-1.5 1.4"></path><path clip-path="url(#b)" fill="#FFF" d="M83.4 71L78 75.2c.4 1 .6 2.1.6 3.3 0 2.3-.9 4.4-2.3 6h15.4c-5.7-3.9-7.6-10-8.3-13.5M75.1 76c0-.1 0-.1-.1-.2-.2-.5-.6-1-.9-1.4-1.1-1.3-2.8-2-4.6-2H36.4c-3.4 0-6.2 2.7-6.2 6.1 0 .7.1 1.3.3 1.9.8 2.4 3.1 4 5.8 4H70c-.2 0-.5.1-.7.2h.1c.5 0 1-.1 1.4-.2h.1c2.7-.7 4.6-3.1 4.6-6 0-.5-.1-1-.2-1.5 0-.3-.1-.6-.2-.9m-36.3 4.5c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.1.9-.6 1.7-1.3 2.2m10.3 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.7 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6s-1.2-.2-1.6-.6c-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8s2.8 1.2 2.8 2.8c-.2.9-.6 1.7-1.3 2.2m10.2 0c-.5.3-1 .6-1.6.6-.6 0-1.2-.2-1.6-.6-.7-.5-1.1-1.3-1.1-2.2 0-1.5 1.2-2.8 2.8-2.8 1.5 0 2.8 1.2 2.8 2.8-.2.9-.6 1.7-1.3 2.2m4.1-5.1c0 .3.1.7.3 1-.2-.3-.3-.6-.3-1M49 48.5h9v8h-9z"></path><path clip-path="url(#b)" d="M36.4 87.5h33.1c.6 0 1.2.1 1.7 0h28.1c.8 0 1.4-.6 1.5-1.3.1-.8-.4-1.5-1.2-1.6-13.1-2.9-13.5-15.8-13.5-16.4 0-.6-.3-1.1-.8-1.3-.5-.2-1.1-.2-1.6.2l-7.2 5.6c-.4-.5-.9-1-1.4-1.4v-8.7h-7.5c-.6 0-1.2-.4-1.4-1l-7-20H40V58c0 .8-.4 1.5-1.2 1.5H29v13.6c-1.1 1.5-1.8 3.3-1.8 5.4 0 5 4.1 9 9.2 9m-6.2-8.9c0-3.4 2.8-6.1 6.2-6.1h33.1c1.9 0 3.5.7 4.6 2 .4.4.7.9.9 1.4 0 .1.1.1.1.2.1.3.3.6.3 1 .1.5.2 1 .2 1.5 0 2.9-2 5.3-4.6 6h-.1c-.5.1-.9 0-1.4 0H36.4c-2.7 0-5-1.6-5.8-4-.3-.7-.4-1.3-.4-2M83.4 71c.7 3.5 2.6 9.6 8.4 13.5H76.4c1.4-1.6 2.3-3.7 2.3-6 0-1.2-.2-2.3-.6-3.3l5.3-4.2zM49 48.5h9v8h-9v-8z"></path><path clip-path="url(#b)" d="M35.5 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.7 1.7 1.3 2.2M45.8 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.1.9.6 1.7 1.3 2.2M56 80.5c.5.3 1 .6 1.6.6s1.2-.2 1.6-.6c.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2M66.2 80.5c.5.3 1 .6 1.6.6.6 0 1.2-.2 1.6-.6.7-.5 1.1-1.3 1.1-2.2 0-1.5-1.2-2.8-2.8-2.8s-2.8 1.2-2.8 2.8c.2.9.6 1.7 1.3 2.2"></path><circle clip-path="url(#b)" fill="none" stroke="#FFF" stroke-width="3" stroke-miterlimit="10" cx="64.5" cy="64.5" r="63"></circle></symbol></svg>
            <!-- endinject -->
            </div>

    <section id="services">
      <div class="callout-container container">
        <div class="row">


          <div class="services-container">
            <a class="service-link" href="">
              <div class="design">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#design"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#design-active"></use>
                        </svg>
                <h2>Design</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="production">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#machine"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#machine-active"></use>
                        </svg>
                <h2>Production</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="construction">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#brick"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#brick-active"></use>
                        </svg>
                <h2>Construction</h2>
              </div>
            </a>
            <a class="service-link" href="">
              <div class="completion">
                <svg version="1.1" viewBox="0 0 100 100" role="presentation">
                            <use class="default" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#house"></use>
                            <use class="active" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#house-active"></use>
                        </svg>
                <h2>Completion</h2>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>

CSS如下：

svg {
  visibility: visible;
}

.service-link .active {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0s, opacity .25s linear;
  -o-transition: visibility 0s, opacity .25s linear;
  transition: visibility 0s, opacity .25s linear;
}

.service-link:hover .active {
  visibility: visible;
  opacity: 1;
}

.service-link:hover .default {
  visibility: hidden;
  opacity: 0;
}

我已经在这个问题上工作了一段时间，但我在墙上。我的下一步可能是从源Illustrator文件重新渲染SVG。

非常感谢任何见解。

更新：我设法重新渲染SVG并修复了一些问题。 CodePen适用于IE10，而不是网站：

图标不适合容器，并且不会应用可见性/不透明度效果。

Answer 1

最终，我发现您不需要指定高度或宽度值，但指定视图框值非常重要。

另外，我必须确保除了唯一ID之外，SVG元素还需要唯一的类名。