Angular

Conflict between ng-attr and SVG elements

Angular JS

There is a conflict between ng-attr and some SVG elements attributes.

Following attributes has conflict when using them with ng-attr:

Attributes of <svg> tag:

  • viewBox
  • preserveAspectRatio

Attributes of <marker> tag:

  • orient
  • markerunits
  • markerheight
  • markerwidth
  • refy
  • refx
  • viewbox

Attributes of <path> tag:

  • d

Attributes of <polyline> tag:

  • marker-end
  • marker-start
  • fill
  • stroke
  • stroke-width

A simple solution on this is to use SVG’s standard attributes for above mentioned tags.