单独元素中对 SVG 过滤器的 CSS 引用

Question

在尝试使用 SVG 滤镜时，我遇到了从 CSS 引用 SVG 滤镜的问题。在某些情况下，应用过滤器会从页面中删除应用过滤器的元素。我认为可能有 2 个原因:

1. 我使用 D3JS 动态添加过滤器的事实;
2. 事实上，我在 CSS 中引用过滤器，定义在一个单独的文件中。

为了测试这个，我创建了一个 MWE这说明了这个问题。对我来说，这在 Firefox 和 Chrome 中呈现，左侧框中没有任何内容，右侧框中有一个灰色圆圈(预期结果)。我认为这消除了原因 1。在我这样做之后，我尝试了:

1. 使用 url(.#filter-id) 进行引用，因此前导点。这并没有改变结果。
2. 将 defs 移动到圆所在的同一 svg 元素中。这fixes问题。

我的问题:是否仍然可以以某种方式引用在单独的 SVG 元素中定义的过滤器？我非常希望在我的应用程序中这样做。我 have read外部文件存在问题，但同一文件中的不同元素肯定是可能的？

Answer 1

我认为问题出在 hidden 类中的 display:none ，您可以使用另一种方式隐藏，例如:

svg.hidden {
  height:0;
  margin:0;
  border:none;
}

var svg = d3.select('#container').append('svg'),
    defs = svg.append('defs'),
    dsFilter;

svg.attr('width', 400).attr('height', 200);

dsFilter = defs.append('filter').attr('id', 'grayscale-d3')
dsFilter.append('feColorMatrix')
  .attr('type', 'matrix')
  .attr('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')

svg.append('text').attr('x', 2).attr('y', 2).text('appended by D3');
svg.append('circle').attr('class', 'd3').attr('cx', 200).attr('cy', 120).attr('r', 60);

body {
  margin: 0;
  font-size: 0;
}

circle {
  fill: #bada55;
  stroke: #000;
  stroke-width: 1px;
}
circle.of {
  filter: url('#grayscale-of');
}
circle.d3 {
  filter: url('#grayscale-d3');
}

svg {
  display: inline-block;
  margin: 1rem 0 0 1rem;
  border: 1px solid #000;
}
svg.hidden {
  height:0;
  margin:0;  
  border:none;
}

text {
  dominant-baseline: text-before-edge;
  font-size: 1rem;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg class="hidden">
  <defs>
    <filter id="grayscale-of">
      <feColorMatrix 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"
                     type="matrix">
      </feColorMatrix>
    </filter>
  </defs>
</svg>
<div id="container">
  <svg width="400" height="200">
    <text x="2" y="2">already in page</text>
    <circle class="of" cx="200" cy="120" r="60" />
  </svg>
</div>