相关疑难解决方法(0)

在我的资产目录中名为gray.svg的文件中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
    </filter>
</svg>

在我的HTML中我有

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
    <image filter="url(assets/gray.svg#grayscale)"xlink:href="assets/images/linux.png" x="0" y="0" width="100%" height="100%"></image>
</svg>

我知道这是assets/gray.svg#grayscale存在的,因为当我进入检查器并单击链接时,它会将我带到一个实际的页面,其中包含在gray.svg中定义的svg.

此外,如果我没有外部的.svg文件,我只是将过滤器放在我的身体顶部,并将svg图像中的过滤器更改为#grayscale正常工作.

我不知道为什么它不起作用.有人可以帮帮我吗？

Plunker

我的 HTML 文件中有以下几行：

<div class="account-container">
 <svg id="icon-account" style="width: 5rem; height: 5rem;">
  <use href="/icons.svg#icon-account" />
 </svg>
</div>

icon.svg 看起来像这样：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>

  <linearGradient id="gradient1" x1="21.3635" y1="1.72727" x2="21.3639" y2="41"     gradientUnits="userSpaceOnUse">
   <stop stop-color="#7DC2C9"/>
   <stop offset="1" stop-color="#446B73"/>
  </linearGradient>

  <symbol id="icon-account" viewBox="0 0 42 42" >
   <path d="M6.09091 34.3314C10.9277 29.4164 15.2241 27.245 21 27.1818C27.3352 27.4877 31.7332 29.4904 36.2727 33.9136M41 21C41 32.0457 32.0457 41 21 41C9.95431 41 1 32.0457 1 21C1 9.95431 9.95431 1 21 1C32.0457 1 41 9.95431 41 21ZM26.4545 15.1818C26.4545 18.1943 24.0125 …