带有svg样式url(#id)的模板用文件名填充

时间:2014-09-12 15:06:20

标签: svg polymer web-component

考虑这个主要文件:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>Bug</title>
  <link rel="import" href="bower_components/polymer/polymer.html">
  <link rel="import" href="svg-bug.html">

</head>
<body>
<p>Directly:</p>
<svg width="50" height="20">
  <defs>
    <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
      <path d="M2,1 L2,10 L10,6 L2,2" style="fill:red;" />
    </marker>
  </defs>
  <path d="M10,10 L40,10"
        style="stroke:#000000; stroke-width: 1.25px;
            fill:none;
            marker-end: url(#arrow);" ></path>
</svg>
<p>Imported:</p>
<svg-bug></svg-bug>
</body>
</html>

svg-bug.html包含此内容:

<polymer-element name="svg-bug" noscript>
  <template>
    <svg width="50" height="20">
      <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
          <path d="M2,1 L2,10 L10,6 L2,2" style="fill:red;" />
        </marker>
      </defs>
      <path d="M10,10 L40,10"
            style="stroke:#000000; stroke-width: 1.25px;
            fill:none;
            marker-end: url(#arrow);" ></path>
    </svg>
  </template>
</polymer-element>

使用Chromium版本37.0.2062.94 Ubuntu 14.04(290621)(64位)和Polymer 0.4.0。结果如下:

Missing arrow head

这是因为路径的样式属性现在包含marker-end: url('svg-bug.html#arrow');

我尝试在各个地方使用no-shim但没有运气。

我该如何解决或解决这个问题?

1 个答案:

答案 0 :(得分:0)

这可能是Polymer中的一个错误,在此处提交问题单https://github.com/polymer/polymer/issues