Dart Element.html converts to lowercase (and should not)

Issue

A am trying to add a <linearGradient> (with capital G) to an SVG element using Dart (dartlang.org). The result is a <lineargradient> element (with lowercase g).
Browsers (Firefox and Chromium) do not display this correctly, they require a capital G for the linearGradient to work properly.

How do I use Dart to add an html snippet without lowercasing the result?
Is there a different function for adding (SVG) snippets that I am missing?

My code so far:

SvgSvgElement svg = new SvgSvgElement();

SvgElement defsElement = new SvgElement.tag('defs');
svg.append(defsElement);

var str = '''
    <linearGradient id="def_2" x1="2557" y1="5281" x2="2603" y2="5253" gradientUnits="userSpaceOnUse" spreadMethod="repeat">
    <stop offset="0" stop-color="#f32b2b" />
    <stop offset="0.75993413" stop-color="#fcc0c0" />
    <stop offset="1" stop-color="#df2323" />
    </linearGradient>
    ''';

Element element = new Element.html(
    str,
    validator: new NodeValidatorBuilder()
      ..allowElement('linearGradient', attributes: ['id', 'x1', 'y1', 'x2', 'y2', 'gradientUnits', 'spreadMethod'])
      ..allowElement('stop', attributes: ['offset', 'stop-color', 'stop-opacity'])
);

defsElement.append(element);

Thanks for any help,
Regards,
Hendrik Jan

Solution

After much trial and error, I finally had a trial and success.

It seems the DocumentFragment.svg() constructor is specially made for this purpose.
The piece of code that does the trick is this:

// make an element from the use string
DocumentFragment frag = new DocumentFragment.svg(str /*no validator here!*/);

// add to defs element
defsElement.append(frag);

Answered By – Hendrik Jan

Answer Checked By – Marilyn (FlutterFixes Volunteer)