Is Svg Resizing This Hard ? What Am I Missing?

I am trying to write code that resizes an SVG overlay on top of an image. The server I am working with returns both the image and via an API, a list of polygon points I need to ove

Solution 1:

There are a couple of issues with your code.

The main problem is you can't use ng-attr-viewBox, because angular will "normalise" the attribute to lower case. It turns the attribute into viewbox (lower case B) which is (currently) invalid. viewBox is case sensitive.

The solution is to use a special trick of Angular to preserve camel-case. If you use ng-attr-view_box, it will generate the correctly camel-cased attribute name of viewBox.

<svg width="100vw" height="100vh"class="zonelayer" ng-attr-view_box="0 0 {{cw}} {{ch}}">

The other thing is that you are using the wrong width and height values for the viewBox. You need to use the natural/intrinsic image dimensions in your viewBox.

$scope.cw = img.naturalWidth;
$scope.ch = img.naturalHeight;

Link to updated code pen