Angular2 SVG filter url

Я использую Angular2 + D3 для создания диаграммы.
Я бы хотел применить фильтр svg к барам, чтобы создать эффект тени.
Пока фильтр создан, и в барах применяется стиль filter: url("#dropshadow"), тень не отображается.
Может ли это быть связано с одной страницей Угловых и url() не найти фильтр? Каким будет правильный способ обойти эту проблему?Angular2 SVG filter url

источник

2016-09-06 TommyF

Просьба указать код. Вы пробовали то же самое за пределами приложения Angular2? Как вы установили '' и 'APP_BASE_HREF'? –

' ...' in 'index.html'. Я не установил APP_BASE_HREF, должен ли я? Он работает вне углового ... Код слишком велик, чтобы опубликовать его прямо сейчас, если я не могу найти решение, я создам меньший пример, воспроизводящий проблему ... – TommyF

Я видел, что он упоминал, что '< base href = "..."> 'может сломать SVG. Попробуйте настроить (предоставление) 'APP_BASE_HREF' вместо этого, чтобы настроить маршрутизатор. Если это для маршрутизатора, вы можете предоставить 'APP_BASE_HREF' и опустить базовый тег. –

Я, наконец, понял это. Лучшее решение, как представляется, впрыснуть Расположение через

import { Location } from '@angular/common'; 
... 
constructor(private location: Location)

, а затем использовать его, чтобы указать путь для url()

.style('filter', 'url(' + this.location.path() + '#drop-shadow)')

Теперь он работает, как ожидалось.

источник

2016-09-06 11:31:14 TommyF

Провел пару часов, ударив головой о стену, пытаясь исправить эту проблему, прежде чем я в конечном итоге проследил проблему с маршрутизатором ng2 и SVG-фильтрами. В конце концов нашел это, и теперь он работает отлично. Очень признателен! – jrdnmdhl

Angular2 SVG filter url

ответ

Смежные вопросы