Pure SVG Not Shown with AngularJS

1,483 views
Skip to first unread message

kacha haan

unread,
Aug 6, 2014, 11:29:30 AM8/6/14
to ang...@googlegroups.com
Hi all,

I obtain a pure SVG from my backend and based to my Routing include it into <div ng-view></div>. 

The result as shown in debugger is: 

<html>
<body>
<div class="ng-scope" ng-view="">
   <div class="ng-binding ng-scope">
      <svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>
   </div>
</div>
</body>
</html>

But instead the browser shows me a rendered SVG it is only shown as text. 

Does anyone know why the SVG is not rendered?

ThomasBurleson

unread,
Aug 7, 2014, 10:42:12 PM8/7/14
to ang...@googlegroups.com
Why are you using `<div class="ng-binding>` ? 

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

So this means you <svg /> is overwritten. Simply remove the ng-bind.

Message has been deleted
Message has been deleted

kacha haan

unread,
Aug 8, 2014, 6:32:59 AM8/8/14
to ang...@googlegroups.com
Thanks a lot for your comment Thomas. Good question why I use <div class="ng-binding">. 

From me comes:

<div ng-view></div> and in the routed html <div>{{json.svg}}</div>

Out of that AngularJS makes: 

<!-- ngView:  -->
<div class="ng-scope" ng-view="">
    <div class="ng-binding ng-scope">
        <svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>
    </div>
</div>

Is there a way to tell AngularJS to avoid ng-binding?

Raul Vieira

unread,
Aug 8, 2014, 4:55:33 PM8/8/14
to ang...@googlegroups.com
Hi Kacha

You can bind using the ngBind directive or the {{expression}}.  In either case ng will add the ng-binding CSS class to the html.

Raul 

Sent from my iPhone
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

ThomasBurleson

unread,
Aug 8, 2014, 7:09:05 PM8/8/14
to ang...@googlegroups.com
@Kacha,

Apparently I was not thinking clearly in my original response:
  <div class="ng-bind">
      <svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>
  </div>
will not render the SVG. Nor will
  <div ng-bind="">
      <svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>
  </div>
But 
  <div class="ng-binding">
      <svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>
  </div>
should render just fine.

So the ng-bind can be used as tag attribute or as a class type class="ng-bind: " ( if you use the :<value> suffix) 
Angular inserts/appends the ng-binding value to the class when the ng-bind directive is used to bind a scope value to the element content.

Your original sample directly used (without ng-view) DOES render the <svg ..>! See my Plunkr sample
Of course I have not tested with ng-view... does it still not work for you ?


kacha haan

unread,
Aug 9, 2014, 7:44:52 AM8/9/14
to ang...@googlegroups.com
Thanks Raul and Thomas.

It still not works, though Foxandxss brought me a step further when he hinted me about security and brought $sce to this issue here. See his Plunker example (including ng-view). 

I stuck now with JSON. From my Backend I get a simple JSON object:

json = Resource {$promise: Object, $resolved: false, $get: function, $save: function, $query: function…}
         $promise: Object
         $resolved: true
         svg: "<svg height="30" width="200"><text x="0" y="15" fill="red">Hello World !</text></svg>"
         __proto__: Resource

But when I try to extract the svg with var jsonsvg = json.svg I only get:

jsonsvg = undefined

Hence nothing to render. 

Any idea why I can not access the svg ?

Jesus Rodriguez

unread,
Aug 9, 2014, 12:03:02 PM8/9/14
to ang...@googlegroups.com
Have you queried it? If you're using $resource, you have to .query() the resource to get it.

kacha haan

unread,
Aug 9, 2014, 4:53:03 PM8/9/14
to ang...@googlegroups.com
When I use .query() instead .get() on the resource I get an exception:

Error: [$resource:badcfg] Error in resource configuration. Expected response to contain an array but got an object
http://errors.angularjs.org/1.2.20/$resource/badcfg?p0=array&p1=object

Jesus Rodriguez

unread,
Aug 9, 2014, 5:04:11 PM8/9/14
to ang...@googlegroups.com
Uhm, that was just a guess, I don't use ngResource so I am not that familiar with it.

kacha haan

unread,
Aug 29, 2014, 10:06:44 AM8/29/14
to ang...@googlegroups.com
Got it.

What I missed in addition to your $sce was handling the $promise.

$scope.json.$promise.then(function(json) { 
    $scope.svg = $sce.trustAsHtml(json.svg);
});


Thanks a lot to all.
Reply all
Reply to author
Forward
0 new messages