How to size an SVG viewBox with AngularJs?

Question

Solutions to similar questions involve CSS and the img tag.

However, I cannot use the <img src="myFile.svg"> because the SVG contains Angular directives, such as

  <path id="Top row 1" ng-click='RoomClicked($event, "A-1")'
        fill={{GetFillColour('A-1')}} stroke="black" stroke-width="1"
        d="M 226.00,69.00
           C 226.00,69.00 226.00,136.00 226.00,136.00  ...

So, I thought to have the SVG inline, in a view, and to size the SVG viewBox according to its its container, because (important) the whole idea is that I want to be able to display the web page at any resolution and have the SVG scale to fit it's parent DIV.

So, I tried

<div>
    <svg xmlns="http://www.w3.org/2000/svg"         
         viewBox="0 0 {{GetSvgDivHeight()}} {{GetSvgDivWidth()}}">

in my view, and

$scope.GetSvgDivHeight = function() 
{
   height = Math.round(screen.height * 0.8);

   return height;
}

$scope.GetSvgDivWidth = function() 
{
   width = document.getElementById('SVG_goes_here').offsetWidth;

   return width;
}

in my controller.

But, the SVG does not show, and the developer console shows

jquery-3.1.1.min.js:3 Error: <svg> attribute viewBox: Expected number, "0 0 {{GetSvgDivHeigh…".

So, 1) can I set the size of my in line SVG's viewBox programactically, from $scope? 2) if not, how can I make the inline SVG, containing Angular directives, fill its parent DIV, and resize if that DIV is resized?

---

[Update] InkScape generated

<svg xmlns="http://www.w3.org/2000/svg"
     width="7.22222in" height="10.0444in"
     viewBox="0 0 650 904">

when I change that to

<svg xmlns="http://www.w3.org/2000/svg"
     height="100%"
     viewBox="0 0 650 904">

The image fills the width of the containing DIV, but only the top half shows and the browser tab grows a vertical scroll bar.

Answer 1

viewBox describes which part of the SVG canvas to display. If, in SVG root coordinates, the left/upper border is at (0,0) and the right/lower at (300,200), set viewBox="0 0 300 200".

To set the display size of the SVG, use width and height. Setting both to 100% suffices to make it fit into the <div>. Even better, they are the default values, so you can leave them off. Note that HTML blocks have no intrinsic height, so you still need to restrict that to screen size.

If you start out with a external SVG that does not set viewBox, but (some of) x, y, width and height

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">

move them into the viewBox for the inline element, remove the width attribute and set the computed screen-related height:

<div style="position:relative;height:{{GetSvgDivHeight()}}">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">

or (Angular 1.x syntax)

<div>
    <svg xmlns="http://www.w3.org/2000/svg"
         ng-attr-height="{{GetSvgDivHeight()}}" viewBox="0 0 300 200">

The need for the ng-attr-height= workaround is explained here and was the reason for the original error message. For Angular 2+, use attribute binding: [attr.height]=