- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
向导,
我在处理 clippath 上的鼠标悬停事件时遇到了一些问题。出于某种原因,它没有触发,我认为这是因为元素正在剪裁 Dude 的图像。
我的目标是提醒悬停元素的用户标识(示例中的 1、2 或 3 - “点”表中的第 4 个元素)。
我已经将它加载到一个 jsfiddle 中:
https://jsfiddle.net/vk1jc8ah/4/
有人可以让它发挥作用 - 或者建议另一种实现相同目标的方法吗?
HTML:
<div class="projectbounds" style="width:400px; height:300px; background-color:#000000;"></div>
JS:
var size = 30,
w = 400,
h = 300,
dots = [];
dots.push([101, 200, 0, 1, 1]);
dots.push([170, 120, 0, 2, 1]);
dots.push([210, 150, 0, 3, 1]);
var svg = d3.select(".projectbounds")
.append("svg:svg")
.attr("id", "robsvg")
.attr("width", w)
.attr("height", h)
.style("cursor", "pointer");
var defs = svg.append("svg:defs");
var imgbg = svg.append('svg:image')
.attr('xlink:href', 'http://www.empireonline.com/images/features/100greatestcharacters/photos/7.jpg')
.attr('x', 0)
.attr('y', 0)
.attr('width', w)
.attr('height', h)
.attr('clip-path', 'url(#robclip)');
var robs = defs.append("svg:clipPath").attr("id", "robclip");
function redraw() {
for (var d in dots) {
robs.append("circle")
.attr("class", function () {
return "userid" + dots[d][4] + " bgtier" + dots[d][3];
})
.attr("cx", function () {
return dots[d][0];
})
.attr("cy", function () {
return dots[d][1];
})
.attr("r", size + 1)
.attr("onmouseover", function() { ////// not triggering...
return "alertid()"; ////// not triggering...
});
}
}
function alertid(){
alert("hi");
}
redraw();
我已经将它加载到一个 jsfiddle 中:
https://jsfiddle.net/vk1jc8ah/4/
有人可以帮忙吗?
最佳答案
Clipaths 实际上并不是“绘制”的元素,如 rect、circle 等...因此,与其将事件监听器放置在 clipath 内的 circle 元素上,不如为鼠标悬停事件创建相同圆圈的叠加层,并使这些圆圈透明。
我创建了一个单独的函数来执行此操作:
function drawEventCircles() {
for (var d in dots) {
svg.append("circle")
.attr("cx", function () {
return dots[d][0];
})
.attr("cy", function () {
return dots[d][1];
})
.attr("r", size + 1)
.attr("fill", "transparent")
.on("mouseover", function() {
alertid();
}
);
}
}
然后在调用 redraw() 之后调用 drawEventCircles();
关于javascript - D3 Clippath 鼠标悬停事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33191321/
我有一台运行 Android 4.2.2 的 ASUS Nexus 7 我的应用程序在运行以下代码时在 sk_malloc_flags 中生成一个 SIGSEGV: static Picture cr
不确定我是否正确地制定了标题,但问题来了。 我有一个云状的 SVG 路径,我想在 CSS 中使用 clip-path属性。 当我在 HTML 中添加一个 SVG 元素并定义 时使用该路径,浏览器将
我正在尝试使用 svg 创建一个 clipPath 图像。我正在尝试使用 SVG 的 native clipPath 方法来完成它。 My problem is that if I use a pat
如何创建上面的自定义clipPath小部件? (我附上了截图) 我尝试过,但输出不准确 Clipper 类 class MessageClipper extends CustomClipper {
我遇到了这个错误。 Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/_engine/engine/surface/path/path
我的CustomClipper从左上角开始,但是,我希望它从右上角开始。 这是我的代码: 快船队: class ProfileBarClipper extends CustomClipper {
这是 this 的延续问题。 这是代码:Plunker 我现在想做的是更新 clipPath 与其他所有内容一致,我无法安静地弄清楚 我尝试了各种方法让它以平滑的方式转换,但每次都得到相同的结果。pl
我想生成一个小部件,其剪辑路径与给定图像中的剪辑路径相似。我在这里谈论的是应用程序屏幕的白色部分,其中包含信息。 下面的代码是我在实验时尝试的,但失败了! Path getClip(Size siz
简而言之,我有一个使用 clipPath 屏蔽的图像,因此它可以在 IE 9+ 中工作。问题是我需要在悬停时隐藏蒙版以显示完整图像,然后在鼠标移开时重新应用。我现在拥有的脚本不起作用。笔在下面。我对
这个问题已经有答案了: 奥 git _a (1 个回答) 已关闭 7 年前。 我有一个图形,上面有三个折线图。 我在图表中添加了一个clipPath,覆盖了所有三个折线图。但每个折线图的顶部都被砍掉了
我想创建一个像这样的路径: 但实际结果边框不好: 现在我想知道如何使用 ClipPath 实现完全圆角。 代码是: class MyClipper extends CustomClipper {
我正在循环增加 clipPath 的大小。循环内部还有另一个循环,它创建了更多的 clipPaths,我用它来绘制降低的 alpha,以便获得过渡效果。但随着 clipPath 大小的增加,转换变得缓
向导, 我在处理 clippath 上的鼠标悬停事件时遇到了一些问题。出于某种原因,它没有触发,我认为这是因为元素正在剪裁 Dude 的图像。 我的目标是提醒悬停元素的用户标识(示例中的 1、2 或
我试图将一个带有 clipPath 的 div 放在页脚中另一个 div 的顶部。这是我要完成的工作的图像。从理论上讲,这听起来很简单,但我似乎在裁剪路径 SVG 的放置和缩放方面苦苦挣扎。 我为剪辑
我有一个 SVG 导航轮,我已经把它放在 jsfiddle SVG navigation wheel 上 这里是实际的 SVG 代码: wheelv2
我正在尝试创建一个 transparent arrow over an image通过 SVG 和 clipPath。这是 jsfiddle与工作解决方案。 当我尝试在我的 div 容器中应用此解决方
我在使用 Canvas clipPath 时收到 UnsupportedOperationException。 这发生在 HTC Sensation XE (4.0.3) 上。它在其他 4.0.3 设
我在 Canvas 上创建了一个圆形剪辑路径,并且有一列数字在 Canvas 上进行了动画处理,因此我看到数字在剪辑部分中进行动画处理并进行动画处理。这是裁剪代码: mClipPath.addCirc
对于我的生活,我无法弄清楚为什么 SVG 不会呈现以下图形: 我发现了以下两件事: 当裁剪路径为基本圆时,图像会被正确裁剪。 当未设置剪辑路径时,图像可以正确呈现。
我有一个布局,里面有几个 View ——工具栏、recyclerview 和几个分隔符(它们是简单的 View ,高度为 2dp,宽度为 match_parent)。我想在布局上放置一个 mask —
我是一名优秀的程序员,十分优秀!