How to style SVG with Dart?

Question

I am trying to styling the SVGElement but fail.Here is my code:

import 'dart:html';
import 'dart:svg';

main(){
    document.querySelector('#path').style.fill='none';//javascript: working, Dart: not working
}

How to make it working in Dart?

Answer 1

You can set the fill property of the CssStyleDeclaration even if it has no appropriate property like

document.querySelector('#circle').style.setProperty('fill', 'none');

This style is very useful if you get the property name as a string parameter.

Answer 2

The style property of a DOM element is a "CssStyleDeclaration" (https://api.dartlang.org/docs/channels/stable/latest/dart_html/CssStyleDeclaration.html). This Class encapsulates all properties of css (as far as I know). It does not poses a "fill" property, hence you can't set it. I suggest you use the

String className

or

CssClassSet classes

property to set a css class that defines your fill style.

var element = querySelector('#path');
element.classes.add('yourSvgClass');