Back to Questions
444
views5
comments
UI.Next templates: text holes in svg create browser errors
websharper

Has anybody tried to use ${} text holes in SVG elements? I get the expected result, but the browser console lists a lot of errors "Unexpected value ${x} parsing y attribute". Other HTML elements don't exhibit this.

.

It seems this is only happening when replacing text holes in svg attribute values. Text holes in svg text is ok, as well as text holes in html attributes.

By on 9/8/2017 6:27 AM ()

More specifically, I see the errors only for text holes in attribute values. Example:

1
2
3

    <svg width="100" height="100">
        <text x="50px" y="${X}">text</text>
    </svg>
By on 9/8/2017 8:09 AM ()

I've played around with this a little and (though I don't know what causes this error) I think I've found a workaround:

Instead of using: <svg width="100" height="100"> <text x="50px" y="${X}">text</text> </svg> I used: <svg width="100" height="100"> <text x="50px" ws-attr="X">text</text> </svg>

Then from F# in the template I used Attr.Create like this:

1

X(Attr.Create "y" "50px")

With this the errors disappeared and it seems to work.

By on 9/16/2017 9:38 AM ()

Thanks. Yes, this works. I actually now resorted to creating the elements fully in F#. I like Templating (because of readability and easy html changes), but in this case I could just as well fully program the elements.

By on 9/18/2017 1:47 AM ()

I have found no way around this, and the errors (hundreds of them in my case) are cluttering the browser console log. For both Chrome and Firefox. Any idea why this happens only for svg? The message look like Myprog.min.js:4 Error: <line> attribute x2: Expected length, "${cx2}". and come from function NamedTemplate

By on 9/16/2017 7:50 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper