Блог

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

Вот как выглядит файл проекта:

• Src
  • приложение
    • Формы
      • shapes.component.html
      • shapes.component.ts
      • shapes.svg

Внутренние формы.svg:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <linearGradient id="blackGradient">
        <stop offset="10%" stop-color="#202020" />
        <stop offset="50%" stop-color="#404040" />
        <stop offset="80%" stop-color="#202020" />
    </linearGradient>
    <g id="testRect" fill="black">
        <circle cx="400" cy="400" r="5" />
        <g>
            <rect x="10" y="150" width="10" height="460" fill="url(#blackGradient)"/>
        </g>
    </g>  
  </defs>
</svg>
  

Внутри shapes.component.html

 <div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <use href="app/Signals/PRR/prrdefs.svg#testRect" />
  </svg>
</div>
  

Когда я запускаю этот код, прямоугольник не отображается. Если я изменю заливку на просто черную, она будет отображаться просто отлично. Если я помещу все определения в shape.component.html затем прямоугольник отображается и оформляется правильно. Может кто-нибудь увидеть, что я делаю неправильно, когда использую определения градиента во внешнем файле shapes.svg? Я бы не подумал, что это проблема с URL, но я новичок в работе с SVGS в Angular.

Заранее благодарю тебя, Шон