css - 链接到片段时，父 SVG 默认为 150x300 - 如何修复？

Question

我正在使用外部 SVG 图像，并链接到其中的一个片段。这是为了:

1. 我的标记很干净
2. 我可以用 CSS 修改 SVG
3. 我只需要一个 SVG 文档，作为一种 spritesheet。

HTML:

<style>
    .icon-1{ fill: red;width: auto;height: auto;display: inline-block;}
</style>

<svg class="icon icon-1" preserveAspectRatio="xMinYMax meet">
    <use xlink:href="svg.svg#icon-icon-map-pin"></use>
 </svg>

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<defs>
<symbol id="icon-icon-map-pin" viewBox="0 0 1167 1024">
    <title>icon-map-pin</title>
    <path class="path1" d="M476.444 684.8l27.022 67.556c-26.311 10.667-52.622 18.489-77.511 23.467l-14.933-71.111c20.622-4.267 42.667-11.378 65.422-19.911zM259.556 772.267c27.022 7.822 54.756 12.089 83.911 12.089l1.422-73.244c-22.044-0.711-44.089-3.556-64.711-9.244l-20.622 70.4zM833.422 644.978c21.333 4.267 41.244 11.378 61.156 21.333l33.422-64.711c-25.6-13.511-52.622-22.756-80.356-27.733l-14.222 71.111zM681.244 584.533l22.044 69.689c22.044-7.111 44.089-11.378 65.422-12.8l-5.689-72.533c-27.022 2.133-54.044 7.111-81.778 15.644zM564.622 640c-8.533 4.978-16.356 9.956-24.178 14.222l35.556 64c9.244-4.978 17.778-9.956 27.022-15.644 12.8-7.822 24.889-14.933 36.978-20.622l-33.422-64.711c-13.511 5.689-27.733 13.511-41.956 22.756zM765.867 184.889c0 29.867-7.111 58.311-19.911 82.489l-162.133 319.289c0 0-163.556-320.711-164.267-322.133-11.378-23.467-17.778-50.489-17.778-78.933 0-100.978 81.778-182.044 182.044-182.044s182.044 81.067 182.044 181.333zM692.622 184.889c0-60.444-49.067-109.511-109.511-109.511s-108.8 49.067-108.8 109.511 49.067 109.511 109.511 109.511 108.8-49.067 108.8-109.511zM947.911 367.644h-171.378l-36.978 72.533h156.444l78.222 236.8-24.889 27.733c27.022 24.178 40.533 46.222 40.533 46.933l7.822-4.978 68.267 204.8h-964.978l73.244-219.022c2.844 2.133 4.267 3.556 7.111 4.978l39.111-61.867c-8.533-5.689-15.644-10.667-22.044-15.644l73.244-219.022h155.733c-15.644-29.867-27.733-54.044-36.978-73.244h-171.378l-219.022 656.356h1166.933l-219.022-656.356z"></path>
</symbol>
</defs>
</svg>

如果我手动将width 或height 设置为像素值，与auto 相反，它仍然会获取默认值。例如，height:25px; width: auto; 会给我一张 25x300 的图片。

这最初的灵感来自 http://css-tricks.com/svg-use-external-source/ , 但宽度/高度是固定的。

即使我将它包装在 position:relative' div 中，并使用 `top:0;right:0;bottom:0;left:0;' 使 svg 元素成为绝对元素，它仍然忽略它。

我很难过 - 它似乎完全无视我的规则。

参见 http://jsfiddle.net/5rcsyk36/

Answer 1

我认为您希望宽度和高度为 100%，而不是自动。

auto 的宽度将使用 svg 元素的固有宽度，并且它没有固有宽度，因为它没有 viewBox。所以你得到的默认值是 300。除了高度的默认值是 150 之外，高度也类似。