javascript - 根据容器元素在 AngularJS 指令中自动调整 SVG 的大小

Question

我在一个动态大小的元素中放置了一个 Angular Directive(指令)。该指令本身包含一个基于元素大小计算的 SVG。我正在尝试根据容器的大小使 SVG 自动调整大小和重绘。

我最初尝试过这样的事情:

我的指令.js

angular
    .module('myModule')
    .directive('myDirective', function () {
        return {
            templateUri: 'path/to/my-directive-template.html',
            ...
        };
    });

我的指令模板.html

<svg style="width: 100%; height: 100%; max-width: 100%; max-height: 100%">
    ...
</svg>

请注意该 SVG 元素上的 style 属性。这在 Chrome 中可以正确调整大小，但在 Firefox 中无法正常工作。另外，我仍然没有重新计算 SVG 内容的方法。

我还尝试在 link 函数中的 element 中添加一个 onresize 处理程序，但是，JQLite 支持 onresize 仅在主窗口上。我无法使用 window.onresize，因为我的窗口大小没有改变。

我尝试使用此处的答案:AngularJS - bind to directive resize , 但他们也没有给出所需的结果。

---

简而言之，这就是我正在尝试做的事情:

1. 当父元素调整大小时，在指令内调整 SVG 元素的大小。
2. 发生这种情况时，通过调用一些处理函数重新计算 SVG 内容。

我希望不要在元素的此时添加 JQuery 依赖项。

Answer 1

可以使用 viewBox 实现此行为和 preserveAspectRatio <svg> 的属性标签。

首先，设置 viewBox 属性到 SVG 图像的规范化边界框。您的整个绘图应按比例缩放以适合此 View 框。例如，

viewBox="0 0 100 100"

将建立一个原点为 (0, 0) 且尺寸为 100 单位 x 100 单位的坐标系。

接下来，使用 preserveAspectRatio 设置调整大小行为属性。

值的第一部分确定 SVG 相对于父元素的对齐方式。这包括左/右/中心水平对齐和顶部/底部/中间垂直对齐。例如，

preserveAspectRatio="xMidYMid ..."

将 SVG 在其容器中居中对齐。

值的第二部分决定 SVG 如何填充容器。例如，

preserveAspectRatio="... meet"

将缩放 SVG，使其刚好适合容器而不裁剪。

所以完整的例子变成了:

<svg viewBox="0 0 64 64" preserveAspectRatio="xMidYMid meet">
    ...
</svg>

因为图像会随着容器自动缩放，所以不需要重新计算内容元素的位置。它由 SVG 标签自动处理。