基于容器元素在AngularJS指令内部自动调整SVG [英] Auto-resize SVG inside AngularJS directive based on container element

问题描述

我在一个动态大小的元素里面放置一个angular指令。指令本身由基于元素大小计算的SVG组成。我试图使SVG根据容器的大小自动调整大小和重绘。

我最初尝试这样：

my-directive.js

  angular 
 .module （'myModule'）
 .directive（'myDirective'，function（）{
 return {
 templateUri：'path / to / my-directive-template.html'，
 ... 
}; 
}）; 
  

my-directive-template.html b

 < svg style =width：100％; height：100％; max-width：100％; max-height：100％> 
 ... 
< / svg> 
  

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

我也试过添加一个 onresize 元素，但是，JQLite支持 onresize 只在主窗口。我不能使用 window.onresize ，因为我的窗口大小 不 更改。

我试图在这里使用答案： AngularJS - bind to directive

---

简而言之，这里是我想要做的：

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


2. 重新计算

我希望不要添加一个JQuery依赖

解决方案

此行为可以使用 viewBox 和 preserveAspectRatio 属性。
$ b 首先，设置 viewBox 属性为您的SVG图像的规范化边框。您的整个绘图应该缩放到适合这个视图框。例如，

  viewBox =0 0 100 100
  

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





接下来，使用 <$ c设置调整行为$ c> preserveAspectRatio 属性。

值的第一部分决定了SVG相对于父元素的对齐方式。这包括左/右/中心水平对齐和顶/底/中间垂直对齐。例如，

  preserveAspectRatio =xMidYMid ...
  

将在其容器中集中对齐SVG。

值的第二部分决定了SVG如何填充容器。例如，

  preserveAspectRatio =... meet
  

将缩放SVG，使其只在容器中适应而不裁剪。

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

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

I am placing an angular directive inside a dynamically-sized element. The directive itself consists of an SVG which is computed based on the element size. I am trying to make the SVG auto-resize and redraw based on the size of the container.

I initially tried something like this:

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>

Note the style attributes on that SVG element. This resizes correctly in Chrome, but fails to work in Firefox. Also, I still don't have a hook to recalculate the SVG contents.

I've also tried adding an onresize handler to the element in the link function, However, JQLite supports onresize only on the main window. I cannot use window.onresize, because my window size does not change.

I've tried to use the answers here: AngularJS - bind to directive resize, but they don't give the required results either.

---

In short, here's what I am trying to do:

1. Resize the SVG element inside the directive when the parent element resizes.
2. Re-calculate the SVG contents by calling some handler function when this happens.

I would prefer not to add a JQuery dependency at this point in the project.

解决方案

This behavior can be achieved using the viewBox and preserveAspectRatio attributes of the <svg> tag.

First, set the viewBox attribute to a normalized bounding box for your SVG image. Your entire drawing should be scaled to fit inside this view box. For example,

viewBox="0 0 100 100"

will set up a coordinate system with the origin at (0, 0) and having the dimensions 100 units x 100 units.

Next, set the resizing behavior using the preserveAspectRatio attribute.

The first part of the value determines the alignment of the SVG with respect to the parent element. This includes left/right/center horizontal alignment and top/bottom/middle vertical alignment. For example,

preserveAspectRatio="xMidYMid ..."

will align the SVG centrally in its container.

The second part of the value determines how the SVG fills the container. For example,

preserveAspectRatio="... meet"

will scale the SVG such that it just fits within the container without cropping.

So the complete example becomes:

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

Because the image scales automatically with the container, there is no need to recalculate the positions of the content elements. It is handled automatically by the SVG tag.

这篇关于基于容器元素在AngularJS指令内部自动调整SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！