角2ダーツSvgパスマーカーが表示されません。何が欠けている？

私はこのような矢印レンダリングする：ここで角2ダーツSvgパスマーカーが表示されません。何が欠けている？

は、ダーツでコンポーネントの私のコードです：

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

それは終わりのない三角形dartiumの行としてレンダリング。私はすべての名前空間を追加する必要があるかどうかはわかりません。レンダリングするブラウザはChromeだけです。

chrome開発コンソールを使用してページを検査すると、htmlファイルを保存して他のブラウザでも使用しました。私は自分のlocalhostからそのページにアクセスしたときと同じ結果になります。

ただし、保存したhtmlファイルから削除すると、すべてのブラウザで機能します。 href = webはindex.htmlファイルから来ます。ここで

が剥ぎ取らhtmlページです：

<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

あなたは、コードeasyerで動作することができますので、私はリポジトリを作成しました：github.com/ericcherin/ArrowNotRendering/tree/master

出典

2017-01-19 Eric Cherin

ギュンターZöchbauerに次のように配置したが、右方向に私を導いた：

をこれはapp_component.dartである：

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

出典

2017-01-20 21:12:03

編集：

問題はですあなたのindex.htmlあなたは

<base href="web">

または

<base href=".">

と交換を削除した場合、それはすべてのDartium、ChromeとFirefoxの間で期待と同じように動作します。

~~Dartium、Chrome、Firefoxでは問題なく動作しているようです。~~

矢頭のない行をレンダリングした唯一のケースは、要素を要素（htmlファイル）に追加できなかった場合です。

参考のために、私はindex.html

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

出典

2017-01-19 06:17:50 Kul

申し訳ありませんが、私はあなたのhtmlファイルを見せていませんでした。それは実際に高さと幅を持っています。それがレンダリングする唯一のブラウザはChromeです。質問の編集でリポジトリへのリンクを追加しました。 –

@EricCherin私は答えを – Kul

に更新しました。Angularの場合、SVGが動作している間に同じ効果を得るために 'provide（APP_BASE_HREF、useValue： '/ web'）'を提供することができます。 –

角2ダーツSvgパスマーカーが表示されません。何が欠けている？

答えて

関連する問題