Question

我想渲染一个这样的箭头：

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

它在dartium中呈现为一条直线，而最后没有三角形。我不确定是否需要添加所有名称空间。它呈现的唯一浏览器是Chrome。

当我使用chrome dev控制台检查页面时，我保存了html文件并在其他浏览器中使用它。当我从本地主机访问该页面时，会产生同样的结果。

但是，当我从保存的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>

修改

我创建了一个存储库，因此您可以使用代码easyer：github.com/ericcherin/ArrowNotRendering/tree/master

Answer 1

GünterZöchbauer带领我走向正确的方向：

这是在app_component.dart中：

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

Answer 2

修改

问题出在index.html。如果删除

<base href="web">

或用
替换它
<base href=".">

这一切在Dartium，Chrome和Firefox上都有效。

~~它似乎在Dartium，Chrome和Firefox上运行良好。~~

在没有箭头的情况下呈现一行的唯一情况是我在html文件中未能将height和width属性添加到svg元素。

作为参考，我已将以下内容放在index.html
中
<svg style="background-color: chartreuse" height="500px" width="500px" xmlns="http://www.w3.org/2000/svg"></svg>

Angular 2 dart Svg路径标记未显示。缺什么？

2 个答案: