使用Ember CLI使用History API时损坏的SVG过滤器id链接

我在Ember-cli应用程序中使用D3.js生成SVG可视化。的SVGs利用了通过id属性访问的过滤器和标记：使用Ember CLI使用History API时损坏的SVG过滤器id链接

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

这个工程索引页面上精（网址：），但穿越到其他路由时被打破（例如：\ otherRoute）。它将工作在其他路线，如果我改变圈为

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

但它然后在索引和所有其他页面上打破。

我可以通过在每个路由上构建svg元素或通过在ember-cli（使用/＃routeUrl而不是/ routeUrl）中使用散列位置类型来手动将url添加到#filterId来修复它，但是想知道是否有一种通用的方式来自动链接到当前的网址，所以我仍然可以使用历史API？

来源

2014-10-01 David Rice

将过滤器放在一个独立的SVG文件中，并给它一个绝对的URL？ – 2014-10-01 07:21:01

这对我来说是一个非常重要的问题。我在一个嵌套组件中渲染一个amCharts图表，由于这个问题，我的图表有时候看起来很奇怪。在我切换到哈希URL后，问题消失了。问题是我对amCharts如何生成svg元素没有太多的控制。有关如何调整amCharts与Ember.js中的嵌套组件良好发挥的任何提示？ – Greg 2016-01-31 18:24:47

从哈希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元素。类似的解决方案，以原来的海报，只是用window.location.pathname产生预谋网址：说的

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

长的路要走。

来源

2015-07-08 20:41:40

使用Ember CLI使用History API时损坏的SVG过滤器id链接

回答

相关问题