Question

我在表格中放了一些svg图像。但是在调整浏览器大小时它会缩小。这是我的代码：

<div class="inner">
    <table>
        <tr>
            <td valign="middle"><a href="#"><svg.....</a></td>
            <td valign="middle"><a href="#"><svg.....</a></td>
            <td valign="middle"><a href="#"><svg.....</a></td>
        </tr>
        <tr>
    </table>
</div>

和css：

.inner {
    width:100%;
    max-width:1400px
}
table {
    width:100%;
    max-width:1400px
}
a {
    display:block;
    width:100%
}
svg {
    width:100%
}

我的网页完全响应。当我尝试缩小浏览器时，svg图像以某种方式不会缩放到小尺寸。它在div中工作。并且它仅适用于chrome浏览器（带表）。

svg图像是一些.svg文件。我已经在img标签中使用它们并使用jquery函数将它们显示为svg资源。

Answer 1

不确定您是否已经这样做，因为您没有包含SVG元素定义，但是您需要提供一个viewbox属性来指示您想要显示的SVG区域。

请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox和http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute。

例如，尝试删除以下小提琴中的viewbox属性，以查看没有viewbox的结果：http://bit.ly/1cZysAh

Answer 2

SVG文件中“width”，“height”和“viewBox”的值是多少？如果它们是像“400px”这样的固定像素量或像“2in”这样的物理量，那么你的SVG将无法缩放。

如果是这种情况，请将它们设置为“100％”或删除它们（这是等效的，因为它们默认为100％）。

此外，您的CSS声明设置'svg {width：100％}'没有按照您的想法进行操作。例如，它与<svg width="100%"...>不同。

svg图像不会在表格中缩放

2 个答案: