SVG binding in V2

Help Requests
1

I am trying to implement SVG diagram in an Aurelia V2 application but having trouble creating the SVG from the view. I have created a very small project to validate that my problem is not related to other parts of the bigger application. When I put an SVG element on the view and attempt to output anything with a “.bind” I am getting an error that the value I am attempting to bind to only has a getter without a setter. This is similar to the issue I was having previously but I think this is probably more related to the templating engine as I can create a very simple example - see below

  <svg width="1000" height="800">
      <g transform='translate(${100},100)'></g>
  </svg>

Error: Uncaught (in promise) TypeError: Cannot set property transform of # which has only a getter
Stack: at PropertyAccessor.setValue (index.js?41e8:4951)
at InterpolationBinding.updateTarget (index.js?15fa:1582)
at InterpolationBinding.$bind (index.js?15fa:1598)
at Controller.bind (index.js?15fa:4002)
at Controller.activate (index.js?15fa:3983)
at ComponentAgent.activate (index.js?5020:3840)
at eval (index.js?5020:1035)
at Transition.run (index.js?5020:2799)
at eval (index.js?5020:1033)
at Batch.invoke (index.js?5020:36)

The same holds true if the binding is done with a .bind on any property. I tried this on a rect for the x and y too but got the same problem. I have found some posts related to doing SVG but I don’t think I have seen anything with V2. I did apply some of the techniques in the other posts but there was still trouble any time I tried to bind a property. I tried this in V1 and the same simple code above is able to execute without any issues so it seems to be a V2 difference.

I created a gist for this at Dumber Gist

Perhaps there is a configuration or some other technique to enable the initialization of the attribute.

–Paul

2

Hi, Paul.
I am not sure if aurelia scans for the svg inner content. My guess is that for performance reasons it doesn’t.
So, a way to do the svg content rendering using aurelia binding could be something like this:

<svg width="1000" height="800" innerhtml.bind="svgContent">
</svg>

And in your viewmodel:

export class MyApp {
  tx = 100;
  ty = 100;
  
  get svgContent() {
    return `<g transform="translate(${this.tx}, ${this.ty})">
              <rect width="100" height="100"></rect>
            </g>`;
  }
}

Here is a link to a gist which shows binding working and updating the svg in response to viewmodel data changes.

Hope this helps.

Cristian

3

That is an interesting concept. I was hoping to utilize components to build up the complexity of the diagram so doing this as a string would bring its own complexity, but still very interesting. I will play with this some more to see if there is a way to get the best of both worlds.

Thanks
–Paul