0

我将一些 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 资源。

4

2 回答 2

0

不确定您是否已经这样做了，因为您没有包含 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

于 2013-09-09T18:30:35.027 回答
0

您的 SVG 文件中的“宽度”、“高度”和“视图框”的值是多少？如果它们是像“400px”这样的固定像素量或像“2in”这样的物理量，那么您的 SVG 将无法缩放。

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

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

于 2013-09-09T18:30:54.630 回答