gpt4 book ai didi

javascript - 转换 svg :image to grayscale on click using d3

转载 作者:行者123 更新时间:2023-11-29 17:45:56 25 4
gpt4 key购买 nike

Site in question

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

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%,但元素没有变成灰度。

有什么想法吗?

最佳答案

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

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)');
}
label {
position: absolute;
top: 0;
}
<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>

关于javascript - 转换 svg :image to grayscale on click using d3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49795561/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com