Неработающая ссылка на идентификатор фильтра SVG при использовании History API с Ember CLI

Я создаю визуализации SVG с помощью D3.js в приложении Ember-cli. 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>

Но затем он ломается на индексе и на всех других страницах.

Я могу исправить это, вручную добавляя URL-адрес к #filterId при создании элементов svg на каждом маршруте или используя хеш-местоположение в ember-cli (который использует /#routeUrl вместо /routeUrl), но мне было интересно, существует ли общий способ автоматически связать текущий URL-адрес, чтобы я все еще мог использовать API истории?


svg ember.js ember-cli html5-history svg-filters
person David Rice    schedule 01.10.2014    source источник
comment
Поместите фильтр в отдельный файл SVG и, возможно, дайте ему абсолютный URL-адрес?   -  person Robert Longson    schedule 01.10.2014
comment
Это очень важный вопрос для меня. Я визуализирую диаграмму amCharts во вложенном компоненте, и из-за этой проблемы мои диаграммы иногда выглядят довольно странно. После того, как я переключился на хеш-адреса, проблема исчезла. Проблема в том, что у меня нет большого контроля над тем, КАК amCharts генерирует элементы svg. Какие-нибудь советы о том, как настроить amCharts, чтобы они хорошо взаимодействовали с вложенными компонентами в Ember.js?   -  person Greg    schedule 31.01.2016

Ответы (1)


arrow_upward
2
arrow_downward

Столкнулся с той же проблемой с атрибутом clip-path после перехода от хеш-адресов к 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-адреса.

person Chris Eaves-Kohlbrenner    schedule 08.07.2015