ember.js - 在 Ember CLI 中使用 History API 时损坏的 SVG 过滤器 ID 链接

Question

我正在 Ember-cli 应用程序中使用 D3.js 生成 SVG 可视化。
SVG 使用通过 id 属性访问的过滤器和标记:

<svg>
    <defs>
        <filter id="filterId">
            ...
        </filter>
    </defs>
    <g>
        <g class="nodes">
            <circle filter="url(#filterId)" ...></circle>
        </g>
    </g>
</svg>

这在索引页 (url:) 上工作正常，但在遍历到其他路由时被破坏(例如:\otherRoute)。如果我将圆圈更改为，它将在另一条路线上工作

<circle filter="url(./otherRoute#filterId)" ...></circle>

但它随后在索引和所有其他页面上中断。

我可以通过在每条路由上构建 svg 元素时手动将 url 添加到 #filterId 或通过使用 ember-cli(使用/#routeUrl 而不是/routeUrl)中的哈希 locationType 来修复它，但想知道是否有通用自动链接到当前 url 以便我仍然可以使用历史 API 的方法？

Answer 1

从哈希 URL 移动到历史 API 后，剪辑路径属性遇到了同样的问题。最初的实现是一个 SVG 元素，如:

<svg>
  <clipPath id="clip-path-ember1919">
    <path d="..."></path>
  </clipPath>
  <g clip-path="url(#clip-path-ember1919)">
    <rect ...></rect>
  </g>
</svg>

这是通过一个简单的 D3 附加实现的:

var emberId = this.$().attr('id');
svg.append('g')
    .attr('clip-path', "url(#clip-path-#{emberId})");

为了解决历史 API 引发的问题，我使用了您描述的相同解决方案(在 URL 前面)，但使用了 window.location.pathname :

var emberId = this.$().attr('id');
var relPath = 
svg.append('g')
      .attr('clip-path', "url(." + window.location.pathname + "#clip-path-" + emberId + ")");

这将创建一个 SVG 元素，非常类似于问题中引用的圆元素。

<svg>
  <clipPath id="clip-path-ember1919">
    <path d="..."></path>
  </clipPath>
  <g clip-path="url(./path/to/page#clip-path-ember1919)">
    <rect ...></rect>
  </g>
</svg>

长话短说:与原海报类似的解决方案，只需使用 window.location.pathname生成前置 URL。