如何使用Dart将lineargradient动态添加到SVG

我正在使用Dart（dartlang.org）生成一些SVG图像。 大多数东西都能工作，但我在添加渐变时遇到了困难

我有一个SvgSvgElement定义如下：

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">
    <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'])
      ..allowElement('stop', attributes: ['offset', 'stop-color', 'stop-opacity'])
);

defsElement.append(element);

我添加了一个defs元素，如下所示：

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">
    <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'])
      ..allowElement('stop', attributes: ['offset', 'stop-color', 'stop-opacity'])
);

defsElement.append(element);

现在，我尝试使用如下字符串片段添加渐变：

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">
    <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'])
      ..allowElement('stop', attributes: ['offset', 'stop-color', 'stop-opacity'])
);

defsElement.append(element);

var str=''
''';
Element=new Element.html(
str，
验证器：新的NodeValidatorBuilder（）
…allowElement（'lineargradient'，属性：[id'，x1'，y1'，x2'，y2']
…allowElement（'stop'，属性：['offset'，'stop color'，'stop opacity']）
);
附加（元素）；

从某种意义上讲，它不会给出错误，但当我检查生成的SVG时，会得到嵌套元素，这显然是错误的：

...<defs>
<lineargradient id="def_1" x1="1624" y1="5847" x2="1673" y2="5886">
    <stop offset="0" stop-color="#f32b2b">
        <stop offset="0.75993413" stop-color="#fcc0c0">
            <stop offset="1" stop-color="#df2323">
            </stop>
        </stop>
    </stop>
</lineargradient>
</defs>...

。。。
...

我在这里有点不知所措。有一些文档，但没有示例，很难理解

任何帮助都将不胜感激，
问候，

---

Hendrik Jan

自动关闭标签不符合HTML5，Dart仅支持HTML5。
这项工作：

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

var str=''
''';

你说得对，它很有效！没有意识到这与HTML5有关。谢谢你的快速回答！