svg - Dart Element.html 转换为小写(不应该)

标签 svg dart linear-gradients dart-html

我正在尝试添加 <linearGradient> (大写 G)使用 Dart (dartlang.org) 转换为 SVG 元素。结果是 <lineargradient>元素(g 小写)。
浏览器(Firefox 和 Chromium)无法正确显示它,它们需要大写 G 才能使 linearGradient 正常工作。

我如何使用 Dart 添加 html 片段而不将结果小写?
是否有用于添加我缺少的 (SVG) 片段的不同功能?

到目前为止我的代码:

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

感谢您的帮助,
此致,
亨德里克简

最佳答案

经过多次尝试和错误,我终于尝试并成功

看来 DocumentFragment.svg() 构造函数是专门为此目的而设计的。
实现这一技巧的代码是这样的:

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

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

关于svg - Dart Element.html 转换为小写(不应该),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31571573/

相关文章:

html - 每当我将 svg Logo 放在引导导航栏上时,它的格式就会发生变化

javascript - 想要拖动示例图像而不是真实元素

flutter - 我/flutter (8686) : Another exception was thrown: NoSuchMethodError: The method 'save' was called on null

html - 使用 CSS 悬停时表 tr 背景渐变

html - 将 svg 图像转换为按钮

javascript - 如何设置 SVG 路径的样式来拍摄图像?

Flutter Messaging App - 禁用图标按钮

javascript - 将 Javascript 回调转换为 Dart future

css - 线性梯度或 calc() 在 IE11 中不起作用

javascript - 如果我有线性渐变,则更改滚动上的颜色背景