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

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

我最初试过这样的方法：

my directive.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内容

我还尝试将

onresize

处理程序添加到

链接

函数中的

元素

，但是，JQLite仅在主窗口上支持

onresize

。我无法使用

window.onresize

，因为我的窗口大小没有改变

我尝试在这里使用答案：，但它们也没有给出所需的结果

---

简言之，我想做的是：

当父元素调整大小时，调整指令中SVG元素的大小

发生这种情况时，通过调用一些处理函数来重新计算SVG内容

---

我不希望在项目的这一点上添加JQuery依赖项。

此行为可以通过使用

标记的

视图框和
保留AspectRatio
属性来实现

首先，将属性设置为SVG图像的规范化边界框。应缩放整个图形以适应此视图框。比如说,

viewBox="0 0 100 100"

preserveAspectRatio="xMidYMid ..."

preserveAspectRatio="... meet"

将设置一个坐标系，原点位于（0，0），尺寸为100个单位x 100个单位

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

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

viewBox="0 0 100 100"

preserveAspectRatio="xMidYMid ..."

preserveAspectRatio="... meet"

将SVG在其容器中居中对齐

该值的第二部分确定SVG如何填充容器。比如说,

viewBox="0 0 100 100"

preserveAspectRatio="xMidYMid ..."

preserveAspectRatio="... meet"

将缩放SVG，使其只适合容器而不进行裁剪

因此，完整的示例变成：

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


...

由于图像会随容器自动缩放，因此无需重新计算内容元素的位置。它由SVG标记自动处理