Angular 2 dart Svg path marker not displaying. Wha

I want to render an arrow like this:

Here is my code for the component in dart:

    ngAfterViewInit(){
    Element svg = querySelector('svg');

    var marks = new MarkerElement()..
    setAttribute('xmlns', "http://www.w3.org/2000/svg")..
    setAttribute('id', 'arrow')..
    setAttribute('markerWidth', '10')..
    setAttribute('markerHeight', '10')..
    setAttribute('refX', '0')..
    setAttribute('refY', '3')..
    setAttribute('orient', 'auto')..
    setAttribute('markerUnits', 'strokeWidth');

    var paths = new PathElement()..
    setAttribute('xmlns', "http://www.w3.org/2000/svg")..
    setAttribute('d', 'M0,0 L0,6 L9,3 z')..
    setAttribute('fill', 'black');

    marks.append(paths);

    var defs = new DefsElement()..append(marks)..
    setAttribute('xmlns', "http://www.w3.org/2000/svg");

    var li = new LineElement()..
    setAttribute('xmlns', "http://www.w3.org/2000/svg")..
    setAttribute('x1','0')..
    setAttribute('y1', '0')..
    setAttribute('x2', '333')..
    setAttribute('y2', '333')..
    setAttribute('stroke', 'black')..
    setAttribute('stroke-width', '3')..
    setAttribute('marker-end', 'url(#arrow)');

    svg.append(defs);
    svg.append(li);
  }

It renders as a line in dartium without the triangle at the end. I am not sure if I need all the namespaces added. The only browser it renders in is Chrome.

When I inspect the page using the chrome dev console, I saved the html file and used it in other browsers as well. The same thing results as when I visit the page from my localhost.

However, when I remove : from the saved html file, it works across all browsers. The href = web comes from the index.html file.

Here is the stripped down html page:

<html><head>
    <base href="web">
 </head>
<body >
        <svg  height="500px" style="background-color: chartreuse" width="500px" xmlns="http://www.w3.org/2000/svg">

            <defs xmlns="http://www.w3.org/2000/svg">
                <marker xmlns="http://www.w3.org/2000/svg" id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
                    <path xmlns="http://www.w3.org/2000/svg" d="M0,0 L0,6 L9,3 z" fill="black"></path>
                </marker>
            </defs>

            <line xmlns="http://www.w3.org/2000/svg" x1="0" y1="0" x2="333" y2="333" stroke="black" stroke-width="3" marker-end="url(#arrow)"></line>
        </svg>
</body></html>

EDIT

I created a repository so you can work with the code easyer: github.com/ericcherin/ArrowNotRendering/tree/master

回答1:

Günter Zöchbauer led me in the right direction:

This is in app_component.dart:

@Component(
    selector: 'my-app',
    templateUrl: 'app_component.html',
    providers: const [ const Provider(APP_BASE_HREF, useValue: '/web') ])

回答2:

Edit:

The problem is in your index.html. If you remove

<base href="web">

or replace it with

<base href=".">

it all works just as expected across Dartium, Chrome and Firefox.

~~It seems to work fine on Dartium, Chrome and Firefox.~~

The only case when it rendered a line without the arrowhead was when I failed to add the height and width attributes to the svg element, in the html file.

For reference, I've placed the following in index.html

<svg style="background-color: chartreuse" height="500px" width="500px" xmlns="http://www.w3.org/2000/svg"></svg>