Question

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

他们不做的是：

自动调整高度以保持方形
SVG正在使用<use>标记，似乎属于自己的世界。

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

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的画布的默认大小。

将width: 33%; height: auto;应用于canvas后，canvas元素会按比例开始缩放，这就是您想要的效果。现在一个SVG稍微有点困难，因为Internet Explorer有一些非常讨厌的不稳定行为，但其他浏览器应该像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>

use

我已从您的svg中移除了viewBox并为其提供了use属性 - 这可以修复大多数浏览器中最有问题的案例。 defs标记无法按照您尝试使用它们的方式运行，并且根据文档：

use元素从SVG文档中获取节点，并在其他位置复制它们。

请注意 SVG文档中的，这就是它进入自己的svg（定义）标记的原因。定义中的内容可以在SVG中重新生成，但只能在其自己的svg标记内。现在我并没有过度进入auto，所以如果我错了，请告诉我，但这就是我所知道的。

同样，您可以看到因为高度为float且宽度已定义，元素保持成比例并与页面宽度成比例。我还必须left Use的所有元素，否则用于构造代码的间距将表示为空格，这意味着每个元素后面都有一些空格。还有其他方法，但这有效（它有缺点，虽然我不会进入这里）。

=IFERROR(MID(A1, SEARCH("specified ", A1)+10, LEN(A1)), "")（MDN）：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

将Canvas和SVG设置为具有流体宽度和高度

1 个答案: