svg - 如何使用Dart向SVG动态添加线性渐变

Question

我正在使用Dart(dartlang.org)生成一些SVG图像。
大多数事情都可以工作，但是我很难添加渐变。

我有一个SvgSvgElement定义如下:

SvgSvgElement svg = new SvgSvgElement();

我添加了这样的defs元素:

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);

从某种意义上讲，它不会给出错误，但是在检查生成的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>...

我在这里有点茫然。有一些文档，但是没有示例，很难理解。

任何帮助将不胜感激，
问候，
亨德里克·扬

Answer 1

自关闭代码不兼容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>
    ''';