# SVG binding in V2

**URL:** <https://discourse.aurelia.io/t/svg-binding-in-v2/4454>\
**Category:** Help Requests\
**Created:** [October 26, 2021, 7:28pm UTC](https://discourse.aurelia.io/t/svg-binding-in-v2/4454 "2021-10-26T19:28:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 26, 2021, 7:28pm UTC](https://discourse.aurelia.io/t/svg-binding-in-v2/4454/1 "2021-10-26T19:28:40Z")

</div>

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

```auto
  <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](https://gist.dumber.app/?gist=0ff2f9c85cd7f8e559d4d3218a75bb2c)

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

–Paul

---

<div class="post-metadata">

**Author:** ![ormasoftchile](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/ormasoftchile/32/340_2.png) [@ormasoftchile](https://discourse.aurelia.io/u/ormasoftchile)\
**Post date:** [October 26, 2021, 8:33pm UTC](https://discourse.aurelia.io/t/svg-binding-in-v2/4454/2 "2021-10-26T20:33:30Z")

</div>

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:

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

```

And in your viewmodel:

```auto
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](https://gist.dumber.app/?gist=1a7a5b3a4adfeb3163dc9e283467b0ea) which shows binding working and updating the svg in response to viewmodel data changes.

Hope this helps.

Cristian

---

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 26, 2021, 9:39pm UTC](https://discourse.aurelia.io/t/svg-binding-in-v2/4454/3 "2021-10-26T21:39:22Z")

</div>

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