html - 将 Canvas 和 SVG 设置为具有流动的宽度和高度

Question

我有一个包含两个 Canvas 和一个 SVG 文件的面板。我将它们设置为宽度为 33.333333% 的内联 block 。他们遵守这些规则，每个容器拿走 33%。

他们不做的是:

1. 自动调整高度以保持正方形
2. SVG 使用 <use>标签，似乎在自己的世界里。

我想要的最终结果是两个 Canvas 和 SVG 具有相同的宽度/高度(为正方形)并在窗口改变大小时自动调整。我正在使用 Bootstrap 来促进这一点。

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;
}

Answer 1

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

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

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 标签无法按照您尝试使用它们的方式工作，并且根据文档:

The use element takes nodes from within the SVG document, and duplicates them somewhere else.

请注意 SVG 文档，这就是它进入自己的 defs(定义)标签的原因。定义中的内容可以在 SVG 中重复使用，但只能在它自己的 svg 标签内使用。现在我不太喜欢 svg，所以如果我有错请告诉我，但这就是我所知道的。

同样，您可以看到，因为高度是 auto 并且宽度已定义，所以元素保持比例并随页面宽度缩放。我还必须将所有元素 float 到left，否则用于构建代码的间距将表示为空格，这意味着每个元素之后都有一些空格它。还有其他解决方法，但这行得通(它有缺点，但我不会在这里讨论这些)。

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