使用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鏈接

回答

相關問題