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

Auto-resize SVG inside AngularJS directive based on container element

本文关键字：调整 SVG 元素 指令 AngularJS      更新时间：2023-09-26

我在一个动态大小的元素中放置了一个angular指令。该指令本身由一个基于元素大小计算的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到指令调整大小，但他们也没有给出所需的结果。

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

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

我更倾向于而不是在这个项目中添加JQuery依赖项

此行为可以使用<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标记自动处理。

相关文章：