将 Canvas 和 SVG 设置为具有可变宽度和高度答案

【问题标题】：Set Canvas and SVG to have fluid widths and heights将 Canvas 和 SVG 设置为具有可变宽度和高度
【发布时间】：2015-12-16 01:37:25
【问题描述】：

我有一个面板，其中包含两个画布和一个 SVG 文件。我将它们设置为宽度为 33.333333% 的内联块。他们遵守这些规则，每个容器占 33%。

他们不做的是：

自动调整高度以保持方形
SVG 使用了<use> 标签，似乎在它自己的世界中。

我想要的最终结果是两个画布和 SVG 具有相同的宽度/高度（为正方形）并在窗口改变大小时自动调整。我正在使用引导程序来促进这一点。

http://jsfiddle.net/xqvx9dyq/14/

HTML

<div class="container-fluid">
    <div class="col-md-3 col-lg-3">
        <div class="panel panel-default">
            <div id="container">
                <canvas class="chart">
                </canvas>
                <canvas class="chart">
                </canvas>
                <svg class="chart ">
                    <use xlink:href="#test"></use>
                </svg>
            </div>
        </div>
    </div>
    <div class="col-md-9 col-lg-9">
    </div>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="test">
            <title>Layer 1</title>
            <ellipse ry="39" rx="45" id="svg_4" cy="54" cx="50.5" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="#FF0000" />

        </symbol>
    </defs>
</svg>

CSS

.chart {
    width: 33.33333333%;
    display: inline-block;
    vertical-align: middle;
    background-color: red;
}

#container {
    width: auto;
    height: auto;
    background-color: white;
    font-size: 0;
}

【问题讨论】：

height: auto 在 svg 和画布上是否适合您？
@somethinghere 不，这没有任何作用
抱歉，如果您添加 height: auto，您的画布 (canvi?) 可以完美缩放。它们的默认大小为 300x150，如果我将您的 CSS 设置为将它们缩放为 width: 33%; height: auto，它们将与您的页面宽度完美缩放而不会挤压它们。如果您希望它们是方形的，请给它们首选的width 和height
你能提供一个小提琴什么的吗？将高度设置为自动对我没有任何作用。
检查我的答案及其 SO sn-p。

标签： html css twitter-bootstrap svg

【解决方案1】：

首先，根据您提供的代码，您的canvas 元素一开始就不是正方形，它们是矩形。准确地说是 300 x 150，或者是未定义 width 或 height 的画布的默认大小。

一旦将width: 33%; height: auto; 应用到它，canvas 元素就会开始按比例缩放，这就是您想要的效果。现在 SVG 稍微难一些，因为 Internet Explorer 有一些非常烦人的不稳定行为，但其他浏览器应该将其视为类似 canvas，从 CSS 的角度来看，它就像 image 元素一样对待。

body {
  padding: 0;
  margin: 0;
}
.chart {
    width: 33.33333333%;
    float: left;
    display: inline-block;
    vertical-align: middle;
    background-color: red;
}

#container {
    width: auto;
    height: auto;
    background-color: white;
    font-size: 0;
}

<canvas class="chart" width="50" height="50"></canvas>
<canvas class="chart" width="50" height="50"></canvas>
<svg class="chart" viewBox="0 0 150 150">
  <ellipse ry="39" rx="45" id="svg_4" cy="75" cx="75" stroke-linecap="null" stroke-linejoin="null" stroke-width="5" stroke="#000000" fill="#FF0000" />
</svg>

我已从您的 svg 中删除了 use 并为其赋予了 viewBox 属性 - 修复了大多数浏览器中最有问题的情况。 use 标签不能按照您尝试使用它们的方式工作，并且根据文档：

use 元素从 SVG 文档中获取节点，并将它们复制到其他地方。

注意 SVG 文档中的，这就是为什么它进入了它自己的defs（定义）标签。定义中的内容可以在 SVG 中重用，但只能在它自己的 svg 标签内。现在我并不太喜欢svg，所以如果我错了，请告诉我，但这就是我所知道的。

再次，您可以看到因为高度为auto 并且宽度已定义，元素保持成比例并随页面宽度缩放。我还必须将float 的所有元素添加到left，否则用于构造代码的间距将表示为空格，这意味着每个元素后面都有一些空格。有其他方法可以解决它，但这是可行的（它有缺点，虽然我在这里不打算讨论）。

Use (MDN): https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

【讨论】：