我正在使用 D3,我想在鼠标悬停时模糊图像。
我直接在图像后面放置了一个 rect
元素,并在图像上设置了 pointer-events: none
和 pointer-events: all
在矩形上。这可以很好地捕获鼠标悬停事件,但我无法使图像模糊。
这是我的 D3 代码,用于设置图像及其 rect
元素:
var newImages = images.enter()
.append("g")
.attr("class", "image");
newImages.append("svg:image")
.attr('class', 'image-body')
.attr('x', 0).attr('y', 20)
.attr("xlink:href", function(d, i) {
return "http://placekitten.com/150/200";
});
newImages.append("rect")
.attr('class', 'image-background')
.attr('x', 0).attr('y', 20);
还有不起作用的 CSS:
.image-background {
stroke: black;
stroke-width: 1px;
fill: none;
cursor: pointer;
pointer-events: all;
width: 150px;
height: 200px;
}
.image-background:hover {
-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-o-filter: blur(1px);
-ms-filter: blur(1px);
filter: blur(1px);
}
.image-body {
pointer-events:none;
width: 150px;
height: 200px;
}
如果我将 fill: blue
添加到 image-background: hover
中,那看起来就很好了。是否可以改为添加模糊滤镜?
这是我的 JSFiddle:https://jsfiddle.net/p4bfsvw9/2/
最佳答案
您可以使用 SVG 滤镜。
创建过滤器:
var filter = svg.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 1);
使用过滤器:
newImages.on("mouseover",function(){
d3.select(this).select("image").attr("filter", "url(#blur)");
})
.on("mouseout",function(){
d3.select(this).select("image").attr("filter", null);
});
引用:http://www.w3schools.com/svg/svg_fegaussianblur.asp
var data = [{
id: 1
}];
var svg = d3.select(".container")
.append("svg")
.attr("width", 500)
.attr("height", 500)
.append("g")
.attr("transform", "translate(10,10)");
var filter = svg.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 1);
var images = svg.selectAll(".image")
.data(data, function(d) {
return d.id;
});
var newImages = images.enter()
.append("g")
.attr("class", "image");
newImages.append("svg:image")
.attr('class', 'image-body')
.attr('x', 0)
.attr('y', 20)
.attr("xlink:href", function(d, i) {
return "http://placekitten.com/150/200";
})
newImages.on("mouseover",function(){
console.log(this);
d3.select(this).select("image").attr("filter", "url(#blur)");
})
.on("mouseout",function(){
d3.select(this).select("image").attr("filter", null);
});
newImages.append("rect")
.attr('class', 'image-background')
.attr('x', 0).attr('y', 20);
newImages.append("rect")
.attr('class', 'image-text-background')
.attr('x', 0).attr('y', 30);
newImages.append("text")
.attr('class', 'image-text')
.attr('x', 0).attr('y', 50)
.text('hello, kitty');
.image-background {
stroke: black;
stroke-width: 1px;
fill: none;
cursor: pointer;
pointer-events: all;
width: 150px;
height: 200px;
}
.image-body {
pointer-events: none;
width: 150px;
height: 200px;
}
.image-text-background {
fill: white;
width: 75px;
height: 30px;
opacity: 0;
}
.image-text {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="container">
</div>
关于css - 如何使用 D3 在鼠标悬停时模糊图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35745042/