CODEWITHSUNDEEP
angularjssvg
Mawg
Mawg

Reputation: 40145

How to size an SVG viewBox with AngularJs?

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.

Upvotes: 5

Views: 7801

Answers (2)

ne1410s
ne1410s

Reputation: 7102

The bounty has (quite rightly) been awarded, but adding this answer as a resolution in my case wasn't immediately clear.

In my case, the ng-attr-viewBox was being inappropriately lower-cased. The solution for this is described here, and repeated here for posterity.

If one wants to modify a camelcased attribute (SVG elements have valid camelcased attributes), such as viewBox on the svg element, one can use underscores to denote that the attribute to bind to is naturally camelcased.

For example, to bind to viewBox, we can write:

<svg ng-attr-view_box="{{viewBox}}"> </svg>

Upvotes: 2

ccprog
ccprog

Reputation: 21921

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]=

Upvotes: 4

Related Questions