SVG не отображается на новой странице - PullRequest
Новая
       71

SVG не отображается на новой странице

0 голосов
/ 20 июня 2020

У меня есть шестигранный аватар SVG, который отлично работает на одной странице, но затем, когда я перехожу на другую страницу, svg не отображается.

Например, на первой странице аватар работает правильно:

enter image description here

но затем после перехода на другую страницу SVG больше не отображает:

enter image description here

У меня есть SVG-аватар в отдельном компоненте под названием hex-avatar.

hex-avatar.component.html: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 166.59 167.72">
    <defs>
        <style>.cls-1 {
            fill: none;
        }

        .cls-2 {
            clip-path: url(#clip-path);
        }</style>
        <clipPath id="clip-path" transform="translate(6.84 0.23)">
            <path class="cls-1"
                  d="M149.26,41.68c5.1,6.35,4.56,77.73.16,83.63s-64.09,41.86-72.35,41.95S8.43,132.85,4.57,125.59-3.34,52.77,4.41,42,67.8,0,76.75,0,144.16,35.32,149.26,41.68Z"/>
        </clipPath>
    </defs>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <g class="cls-2">
                <g id="NXRQAU">
                    <image id="NXRQAU-2" data-name="NXRQAU" width="600" height="600" transform="scale(0.28 0.28)"
                           [attr.xlink:href]="url"/>
                </g>
            </g>
        </g>
    </g>
</svg>

Вы можете увидеть изображение внутри сверху. шестиугольника является входом в компонент: 

export class HexAvatarComponent implements OnInit {

    @Input() url: string;

Почему шестиугольник svg не отображается на аватаре при перенаправлении на новую страницу (компонент)?

...