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>

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

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

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

<小时/> 简而言之，这就是我想要做的事情：

当父元素调整大小时，调整指令内的SVG元素。
发生这种情况时，通过调用某个处理函数重新计算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标签自动处理。

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

1 个答案: