Composed SVG elements missing attributes

1

By using the ‘containerless’ attribute I can get the compose element to inject text into the body of a SVG text element. However, I cannot get valid output from compose if I move the entire text element into the view. The element is output but attributes (x, y, and fill) are not only not populated but entirely missing.

I have noticed the same thing happens with the rect element. The x, y, width, height and fill attributes are all missign from the output, although the values I want to inject are definately present in the view-model.

I am exercising this code within the Chrome browser which otherwise renders SVG very well by Aurelia.

I am also finding that, once output, some SVG elements (such as title) are not being processes by the parser although they appear in the DOM (according to the Elements view in Chrome dev tools.) I suspect this is more on an issue with Chrome than Arelia.

2

Largely resolved this issue by wrapping the SVG inside the compose view with a svg element. Nested SVG elements are legal AFAIK but the test is that I have a solution to my problem.

Additional: If you want to inject HTML into an SVG using Aurelia compose, the SVG needs to wrap the compose element with a foreignObject element defining where the insertion point should be.

3

@tg.gilmore see my post here about our tests with svg.

Child SVGs are supported but sometimes the default overflow: hidden applied to them might give some strange output.