title: Angular bind to svg text element getting unknown property error
body: <p>I'm trying to bind a value to an SVG/Text element's dx property. Without binding it would look like:</p>
  <pre><code>&lt;svg width=&quot;100%&quot; height=&quot;130px&quot; viewBox=&quot;0 0 150 150&quot; *ngIf=&quot;!filled&quot;&gt;
    &lt;circle attr.stroke='{{backColor}}' stroke-width=&quot;5&quot; fill='transparent' r=&quot;50&quot; cx=&quot;50%&quot; cy=&quot;35%&quot; /&gt;
    &lt;text x=&quot;50%&quot; y=&quot;32%&quot; dx=&quot;8&quot; alignment-baseline=&quot;middle&quot; text-anchor=&quot;middle&quot; font-size=&quot;33&quot; attr.fill=&quot;{{color}}&quot;&gt;{{value}}
    &lt;/text&gt;
    &lt;text x=&quot;50%&quot; y=&quot;45%&quot; alignment-baseline=&quot;middle&quot; text-anchor=&quot;middle&quot; font-size=&quot;12&quot; attr.fill=&quot;{{color}}&quot;&gt;{{label}}
    &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I've tried various binding possibilities like:</p>
  <pre><code>&lt;text x=&quot;50%&quot; y=&quot;32%&quot; dx=&quot;{{dxnum}}&quot; &gt;
  </code></pre>
  <p>and</p>
  <pre><code>&lt;text x=&quot;50%&quot; y=&quot;32%&quot; [dx]=&quot;dxnum&quot; &gt;
  </code></pre>
  <p>But this always gives an error saying that dx is not a recognized attribute of SVG text:</p>
  <p>Can't bind to <code>dx</code> since it isn't a known property of <code>:svg:text'. (&quot;lor}}' stroke-width=&quot;5&quot; fill='transparent' r=&quot;50&quot; cx=&quot;50%&quot; cy=&quot;35%&quot; /&gt; &lt;text x=&quot;50%&quot; y=&quot;32%&quot; [ERROR -&gt;]dx=&quot;{{dxnum}}&quot; alignment-baseline=&quot;middle&quot;</code></p>