基于容器元素在 AngularJS 指令中自动调整 SVG 大小

Posted 2023-03-06

【中文标题】基于容器元素在 AngularJS 指令中自动调整 SVG 大小

【英文标题】：Auto-resize SVG inside AngularJS directive based on container element

【发布时间】：2014-09-28 13:33:16

【问题描述】：

我在动态大小的元素中放置了一个角度指令。该指令本身由一个 SVG 组成，它是根据元素大小计算的。我正在尝试根据容器的大小使 SVG 自动调整大小和重绘。

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

my-directive.js

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

my-directive-template.html

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

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

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

我尝试在这里使用答案：AngularJS - bind to directive resize，但它们也没有给出所需的结果。

---

简而言之，这就是我想要做的：

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

我宁愿不在项目中此时添加 JQuery 依赖项。

【参考方案1】：

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

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

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 标签自动处理。