我将角度指令放置在动态大小的元素内。该指令本身包含一个SVG，该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>
注意该styleSVG元素上的属性。在Chrome中可以正确调整大小，但在Firefox中无法使用。另外，我仍然没有钩子来重新计算SVG内容。
我也尝试添加一个onresize处理程序的element在link功能，但是，JQLite支持onresize只在主窗口。我无法使用window.onresize，因为我的窗口大小没有改变。
我试图在这里使用答案：AngularJS-绑定到指令resize，但它们也未提供所需的结果。
我希望此时不要在项目中添加JQuery依赖项。
可以使用标签的viewBox和preserveAspectRatio属性来实现此行为<svg>。
首先，将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标签自动处理。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句