"invalid value for attribute" errors at startup for svg elements #1050

dwhipp · 2012-06-13T15:01:56Z

Using chrome Version "20.0.1132.27 beta" (but also seen on other versions)

For this html (obviously it's simplified from the original):

<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc12.min.js"></script>
  </head>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect x="{{0}}" y="{{0}}" width="{{100}}" height="{{100}}" fill="red"/>
    </svg>
  </body>
</html>

it draws the expected rectangle, but when I look in the javascript console I see:

Error: Invalid value for attribute x="{{0}}" bug.html:7
Error: Invalid value for attribute y="{{0}}" bug.html:7
Error: Invalid value for attribute width="{{100}}" bug.html:7
Error: Invalid value for attribute height="{{100}}" bug.html:7

that apparently come from before the values are evaluated. They seem harmless, but are distracting (the real code generates a couple of thousand such errors, due to ng-repeat -- see http://dave.whipp.name/tutorial/anti-alias.html).

geelen · 2012-09-08T05:18:15Z

Is there a directive or another Angular technique to get around this error? Ng-cloak isn't sufficient.

mtiller · 2012-09-24T20:54:35Z

Sadly, I've run into this exactly same issue. Presumably Chrome is "evaluating" the SVG before AngularJS has a chance to go in and mess with the DOM? (and rightfully cannot evaluate the string "<[ 100+v.row*100 ]>" down to a number with Angular's help).

vsirisanthana · 2012-10-21T15:39:41Z

I have had the same problem. Finally, I decided to write my own directives:

angular.module('yourmodule.directives', [])
    .directive('ngX', function() {
        return function(scope, element, attrs) {
            scope.$watch(attrs.ngX, function(value) {
                element.attr('x', value);
            });
        };
    })

Then, use ng-x attribute instead of x:

<circle ng-x="{{ x }}" y="0" r="5"></circle>

Finally got rid of annoying error messages.

mtiller · 2012-10-21T20:18:34Z

That is an excellent solution. I will try it out. However, I wonder if I will have to create a whole bunch of directives for all the attributes that are affected.

Thanks.

rkirov · 2012-10-22T01:25:43Z

Similarly to ngHref and ngSrc you can do

angular.forEach(['x', 'y', 'width', 'height'], function(name) {
  var ngName = 'ng' + name[0].toUpperCase() + name.slice(1);
  myModule.directive(ngName, function() {
    return function(scope, element, attrs) {
      attrs.$observe(ngName, function(value) {
        attrs.$set(name, value); 
      })
    };
  });
});

vsirisanthana · 2012-10-22T07:48:25Z

@mtiller I think so. I had to create a whole bunch of directives for all the attributes as well. But, as @rkirov suggested, you can use a loop to do that.

@rkirov I've never used attrs.$observe and attrs.$set. Are those better than using scope.$watch and element.attr? What are the differences?

lanterndev · 2013-02-23T17:33:51Z

Thanks for sharing that snippet, @rkirov, super helpful! Strange problem though: If you use that for "d" attributes as well, and try to set the value to empty string, resulting in elem.setAttribute("d", "") where elem is a path element, Chrome will give Error: Problem parsing d="" in the error console. But according to http://www.w3.org/TR/SVGTiny12/paths.html#DAttribute d="" is perfectly valid, and this is the way to disable rendering of the path, which sometimes you need. Anyone have any idea what's going on here? Is this a WebKit bug?

lanterndev · 2013-02-24T18:13:36Z

Is this a WebKit bug?

Yes.

lrlopez · 2013-02-24T18:48:57Z

It seems #1925 is a duplicate of this issue. I didn't notice this one, sorry.

There is a pending PR (#2061) that solves it using prefixes on the attributes that need late binding.

Unfortunately, as @Skivvies pointed out, the problem about d="" is a WebKit bug...

Sometimes is not desirable to use interpolation on attributes because the user agent parses them before the interpolation takes place. I.e: <svg> <circle cx="{{cx}}" cy="{{cy}}" r="{{r}}"></circle> </svg> The snippet throws three browser errors, one for each attribute. For some attributes, AngularJS fixes that behaviour introducing special directives like ng-href or ng-src. This commit is a more general solution that allows prefixing any attribute with "ng-attr-", "ng:attr:" or "ng_attr_" so it will be set only when the binding is done. The prefix is then removed. I.e: <svg> <circle ng_attr_cx="{{cx}}" ng-attr-cy="{{cy}}" ng:Attr:r="{{r}}"></circle> </svg> Closes angular#1050 Closes angular#1925

elenadelvallematute · 2016-05-16T09:28:05Z

Great solution vsirisanthana. I was having the same error "Expected moveto path command ('M' or 'm') angular" when drawing a line for the same reason on the attribute 'd'.

angular.module('yourmodule.directives', [])
.directive('ngD', function () {
    return function (scope, element, attrs) {
        scope.$watch(attrs.ngD, function (value) {
            element.attr('d', value);
        });
    };
});

Many thanks

peterjhart · 2016-08-22T22:12:30Z

Actually, these days (AngularJS 1.5) you prepend your attributes with "ng-attr-", so:

<rect x="{{0}}" y="{{0}}" fill="red"/>

would become:

<rect ng-attr-x="{{0}}" ng-attr-y="{{0}}" fill="red"/>

Berg-it · 2016-10-16T12:03:16Z

about the problem

Error: Invalid value for attribute x1="{{viewBox.x1}}"
Error: Invalid value for attribute y1="{{viewBox.y1}}"

you can replace the x1 and y1 byng-attr-x1 & ng-attr-y1

When using ngAttr, the allOrNothing flag of $interpolate is used, so if any expression in the interpolated string results in undefined, the attribute is removed and not added to the element

AmelBattery · 2018-01-22T11:10:04Z

It's working with replacing d with ng-attr-d

j8-attr-* 속성이 왜 필요하냐 하면 요런 문제 때문이다. angular/angular.js#1050 앵귤러가 해결한 방법을 그대로 따라간다.

bthornemail · 2018-08-30T16:21:57Z

Thanks peterjhart , it worked. I was wondering would it work if I created a link function and then processed the component through $onInit.

wmertens mentioned this issue Feb 1, 2013

what happened to ng-bind-attr? #1925

Closed

lanterndev pushed a commit to getlantern/lantern-ui that referenced this issue Feb 4, 2013

workaround for angular/angular.js#1050

d10146f

lrlopez mentioned this issue Feb 25, 2013

feat($compile): Allow late binding attributes #2061

Closed

IgorMinar closed this as completed in cf17c6a Feb 27, 2013

mizchi mentioned this issue Mar 2, 2014

General FAQ vuejs/vue#96

Closed

asavoy mentioned this issue Jun 30, 2014

Rendering SVG with Mustache and can.Map, can raise errors on attribute values canjs/canjs#1128

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"invalid value for attribute" errors at startup for svg elements #1050

"invalid value for attribute" errors at startup for svg elements #1050

dwhipp commented Jun 13, 2012

geelen commented Sep 8, 2012

mtiller commented Sep 24, 2012

vsirisanthana commented Oct 21, 2012

mtiller commented Oct 21, 2012

rkirov commented Oct 22, 2012

vsirisanthana commented Oct 22, 2012

lanterndev commented Feb 23, 2013

lanterndev commented Feb 24, 2013

lrlopez commented Feb 24, 2013

elenadelvallematute commented May 16, 2016

peterjhart commented Aug 22, 2016

Berg-it commented Oct 16, 2016

AmelBattery commented Jan 22, 2018

bthornemail commented Aug 30, 2018

"invalid value for attribute" errors at startup for svg elements #1050

"invalid value for attribute" errors at startup for svg elements #1050

Comments

dwhipp commented Jun 13, 2012

geelen commented Sep 8, 2012

mtiller commented Sep 24, 2012

vsirisanthana commented Oct 21, 2012

mtiller commented Oct 21, 2012

rkirov commented Oct 22, 2012

vsirisanthana commented Oct 22, 2012

lanterndev commented Feb 23, 2013

lanterndev commented Feb 24, 2013

lrlopez commented Feb 24, 2013

elenadelvallematute commented May 16, 2016

peterjhart commented Aug 22, 2016

Berg-it commented Oct 16, 2016

AmelBattery commented Jan 22, 2018

bthornemail commented Aug 30, 2018