Question

我正在尝试使用以下函数将使用d3.select附加的所有svg：图像转换为灰度：

JS：

 <script>

  function convert() {
    d3.selectAll("image")
      .style('filter', 'grayscale(100%)');
  }

</script>

HTML：

<label id="label" style="display:inline;cursor:pointer;" onclick="convert();">
See in Grayscale</label>

使用以下内容创建相关目标项目：

  var images = nodeEnter.append("svg:image")
    .attr("xlink:href",  function(d) { return d.path;})
    .attr("x", function(d) { return -25;})
    .attr("y", function(d) { return -25;})
    .attr("height", 50)
    .attr("width", 50);

我看到检查器中的函数是将样式属性过滤器添加到灰度100％，但元素没有变成灰度。

有什么想法吗？

Answer 1

由于您使用的是SVG图片而不是<img>标记，因此您应该应用过滤器，如下面的代码段所示。

＆＃13;

var nodes = [{
  path: "https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  x: 0,
  y: 20
}, {
  path: "https://images.pexels.com/photos/223022/pexels-photo-223022.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  x: 250,
  y: 20
}];

var nodeEnter = d3.select("svg")
  .selectAll("node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("transform", function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

nodeEnter.append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", 200)
  .attr("width", 200);

nodeEnter.append("svg:image")
  .attr("xlink:href", function(d) {
    return d.path;
  })
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", 200)
  .attr("width", 200);

function convert() {
  d3.selectAll("image")
    .style('filter', 'url(#grayscale)');
}

＆＃13;

label {
  position: absolute;
  top: 0;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<label id="label" style="display:inline;cursor:pointer;" onclick="convert();">
See in Grayscale</label>

<svg x=0 y=0 width=500 height=500>
 <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>

＆＃13;

使用d3在单击时将svg：image转换为灰度

1 个答案: