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

Question

我在一个动态大小的元素中放置一个angular指令.该指令本身由一个SVG组成,该SVG是根据元素大小计算的.我试图使SVG自动调整大小并根据容器的大小重绘.

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

我-directive.js

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

我的指导性,template.html

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

请注意该styleSVG元素的属性.这在Chrome中正确调整大小,但无法在Firefox中使用.另外,我仍然没有重新计算SVG内容的钩子.

我也尝试在函数中添加一个onresize处理程序,但是,JQLite 只支持在主窗口上.我无法使用,因为我的窗口大小没有变化.elementlinkonresizewindow.onresize

我试图在这里使用答案:AngularJS - 绑定到指令调整大小,但它们也没有给出所需的结果.

---

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

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

我宁愿不以项目这一点上添加一个jQuery的依赖性.

Answer 1

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

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

viewBox="0 0 100 100"

将设置原点为(0,0)并且尺寸为100单位×100单位的坐标系.

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

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

preserveAspectRatio="xMidYMid ..."

将SVG集中在其容器中.

值的第二部分确定SVG如何填充容器.例如,

preserveAspectRatio="... meet"

将缩放SVG,使其恰好适合容器而不进行裁剪.

所以完整的例子变成了:

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

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