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

如何使用Dart动态地将线性渐变添加到SVG

1 个答案: