为什么 <feDropShadow> 不显示？答案

【问题标题】：Why is <feDropShadow> not displaying?为什么 <feDropShadow> 不显示？
【发布时间】：2021-01-15 12:55:26
【问题描述】：

编辑：尝试创建mcve 我无法重现该问题。现在我完全困惑了。适用于代码框，不在我的项目中。

最初的问题
我想创建一个动态内联 SVG 元素并将其旋转映射到 [(ngModel)]。没什么特别的。

花哨的部分是我想使用<filter> 和<feDropShadow>。而且我希望阴影是动态的（无论针的旋转如何，始终指向上方）。这是我在使用 Vue 之前做过的事情。

这是一个演示效果的小提琴：https://jsfiddle.net/websiter/y4ghan0k/

但是，在我的一生中，当 <svg> 内联在模板中时，我无法让 <feDropShadow> 在 Angular 中工作。它只是不会显示。没有错误或警告。如果我将它作为<img src="path/to/svg"> 插入，它会按预期工作（显示阴影），但是我不能再旋转路径，因为转换的元素需要是带有过滤器的元素的子元素。

注意这不是因为this url() filter issue - 我在过滤器前面加上this.location.path()。

这是我的 Angular 代码的要点：

component.ts：

import { Location } from '@angular/common';

export class SomeComponent {
  constructor(private location: Location) {}
  dsLink = `url(${this.location.path()}#drop-shadow)`;
}

component.html：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="180" y="100"
     viewBox="0 0 180 100" xml:space="preserve">
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="drop-shadow" height="130%">
      <feDropShadow dx="0" dy="-4" flood-color="rgba(0,0,0,.65)"/>
    </filter>
  </defs>
  <g [attr.filter]="dsLink">
    <path fill="#fff" d="M102.2,89.5c0-0.1,0-0.1,0-0.2c0-0.2,0-0.4-0.1-0.6L92.9,6.8c-0.1-0.8-3.2-0.9-3.3,0
      L78.7,88.5c-0.1,0.2-0.1,0.4-0.1,0.6c0,0.1,0,0.1,0,0.2l0,0.1c0,0,0,0.1,0.1,0.1c0.5,2.4,5.6,4.4,11.7,4.4
      c6.2,0.1,11.2-1.8,11.8-4.2c0,0,0.1-0.1,0.1-0.1L102.2,89.5z">
    </path>
  </g>
</svg>

为简单起见，我已经从应该旋转针的路径中删除了[(ngModel)]。

过滤器url() 似乎是正确的，没有错误。但是没有显示阴影。

为了使 Angular 处理 <svg> 元素内联，我需要做什么/知道什么特别的事情吗？

我错过了什么？

【问题讨论】：

标签： html css angular svg svg-filters

【解决方案1】：

我终于破解了，所以我在这里发布它，希望它可以帮助其他人。

简而言之：对每个组件实例中的过滤器使用唯一 ID。否则，每个实例将使用在 DOM 中找到的第一个过滤器（具有该 id），并且如果该过滤器恰好位于具有 display: none、visibility:hidden 或 opacity: 0 的父级内部，则应用该过滤器将使您应用它的任何内容也看不见。

问题与我在不同选项卡中使用相同组件的事实有关。这创建了组件的单独实例，每个实例都使用相同的 id (#drop-shadow)。虽然重复的 id 显然是无效的 HTML，但如果我们不处理过滤器，这实际上不会成为问题。因为，由于<defs> 是相同的，因此第4 个选项卡上的组件是否使用第一个选项卡上的组件定义的<defs> 并不重要。

除了在处理<filter>s 时，因为它们实际上是动态地逐个像素地计算渲染结果。这意味着，当定义 <filter> 的 <svg> 未呈现时，使用过滤器将使浏览器（逐个像素）计算应用过滤器的结果，并且始终导致所有像素不可见。

所以解决方案是在组件的每个单独实例中分配一个唯一的 id。

【讨论】：