Question

我正在与Angular合作，并尝试使用我制作的一些SVG，但要使其在页面中正确显示和设置样式却非常困难。我在一个单独的.svg文件中进行了设置，并且正在使用标记将其带入页面。

这是项目文件的样子：

src
- 应用
  - 形状
    - shapes.component.html
    - shapes.component.ts
    - shapes.svg

里面的shapes.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>

运行此代码时，矩形不显示。如果我将填充更改为仅黑色，则显示效果很好。如果我将所有的defs都放在shape.component.html中，那么矩形将显示并正确设置样式。当我在外部shapes.svg文件中使用渐变定义时，有人可以看到我在做什么错吗？我不认为这是一个url问题，但是我是将SVG应用于Angular的新手。

先谢谢您，肖恩

在角组件中使用外部SVG进行样式设置

0 个答案: