Angular2 SVG директива молча проваливает

Question

Я пытаюсь использовать плагин ng2-inline-svg с моим приложением Angular2, но он тихо проваливается.

Внешний шаблон:

<div class="my-icon" aria-label="My icon" [inlineSVG]="'src/assets/svg/sprite.svg'"></div>

Ссылка в компоненте:

@Component({ selector: "home", styleUrls: [], templateUrl: "./home.component.html" })

я могу использовать свой хром инспектор, чтобы увидеть этот

<div aria-label="My icon" class="my-icon" ng-reflect-inline-s-v-g="src/assets/svg/sprite.svg"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="position:absolute; width: 0; height: 0"> <symbol viewBox="0 0 100 100" id="icon-plus"> ... </symbol> <symbol viewBox="0 0 77 100" id="icon-edit"> ... </symbol> </svg></div>

в инспекторе, но он не отображается на странице.

Answer 1

Кажется, проблема была на самом деле с укладкой на моем svg, а не с плагином.

Например, этот файл работал:

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" height="100" width="100"> <g transform="translate(0,-952.36216)"> <path transform="translate(0,952.36216)" d="M 40 0 L 40 40 L 0 40 L 0 60 L 40 60 L 40 100 L 60 100 L 60 60 L 100 60 L 100 40 L 60 40 L 60 0 L 40 0 z " /> </g> </svg>

Если вы посмотрите на конце svg тега вы можете увидеть, где определяется высоту и ширину, в то время как в оригинальном svg я отправил его имеет высоту и ширину, установленные на ноль.