英文:
Why svg <path> hover not getting triggered with JavaFX?
问题
我正在使用Java 11和独立的JavaFX模块构建一个PyCharm插件。
该插件包含一个javafx.scene.web.WebView，它从HTML文件加载内容。HTML中除了标准的HTML元素外，还包含SVG元素，如<rect>和<path>。
我遇到了JavaFX WebView行为的问题 - 当我悬停在<path>元素上时，悬停动作从不触发，悬停样式也不生效。当我在Chrome中运行相同的代码时，它可以正常工作。当我在Java 8和JavaFX中运行时，它也可以正常工作。
JavaFX是否完全支持SVG，这只是一个bug吗？
是否有任何解决这个问题的解决方法？
我的build.gradle：
plugins {
id 'java'
id 'org.jetbrains.intellij' version '0.4.5'
id 'org.openjfx.javafxplugin' version '0.0.8'
}
repositories {
mavenCentral()
}
javafx {
version = "11"
}
JAVA运行时版本：11.0.6+8-b765.25 x86_64
英文:
I'm building a PyCharm plugin using Java 11 and the standalone JavaFX module.
The plugin contains javafx.scene.web.WebView that loads its content from an HTML file. The HTML contains, beside standard HTML elements, SVG elements, such as <rect> and <path>.
I'm facing a problem with the JavaFX WebView behavior - when I hover over a <path> element, the hover action is never get triggered, and neither do the hover styles. When I run the same code in Chrome, it works correctly. When I run using Java 8 with JavaFX, it works correctly too.
Does JavaFX fully support SVG, and this is just a bug?
Is there any workaround I can try to solve this problem?
My build.gradle:
plugins {
id 'java'
id 'org.jetbrains.intellij' version '0.4.5'
id 'org.openjfx.javafxplugin' version '0.0.8'
}
repositories {
mavenCentral()
}
javafx {
version = "11"
}
JAVA Runtime version: 11.0.6+8-b765.25 x86_64
答案1
得分: 0
以下是翻译好的代码部分：
// 在页面准备就绪时执行以下操作：
// 使用 jQuery 选择仅位于 SVG 内部的 svg 标签
const $svg = $("svg");
// 尝试仅选择可见图层，忽略不可见元素和子图层元素，如 tspan。这个列表可能需要进行修正
const $layers = $svg.find("a,circle,clipPath,ellipse,image,line,marker,mpath,path,polygon,polyline,rect,symbol,text,textPath");
// 添加悬停事件，因为无法使用 css 的 :hover {fill:rgba(125,125,125,0.5)} 来实现
$layers.hover(
// 鼠标悬停开始时
function() {
// 获取当前悬停的元素
const $layer = $(this);
// 获取当前颜色
const fill = $layer.css("fill"); // 这可能对没有填充的元素不起作用
// 将填充存储为数据以在取消悬停时使用
$layer.data("fill", fill);
// 创建填充的反色，您将需要实现自己的反色函数，或者只对所有悬停使用一种颜色
const inverse = ag.invert(fill);
// 如果没有填充，将必须为该情况实现另一个悬停处理
if (inverse == null) return;
// 使用标准的 jQuery css 接口更改填充颜色
$layer.css("fill", inverse);
},
// 鼠标悬停结束时
function() {
// 撤销对 $layer 的悬停效果
const $layer = $(this);
// 将 css 填充设置为 .data("fill")
$layer.css("fill", $layer.data("fill"));
}
);
请注意，由于您要求只返回翻译的代码部分，因此我已经省略了任何附加的说明性文本。如果您有任何进一步的问题或需要其他帮助，请随时提问。
英文:
Works for me, I execute this on page ready:
// Using jQuery scope svg tags to just those within SVG
const $svg = $("svg");
// Attempt to just select the visible layers, ignore non-visible elements and sublayer elements like tspan, this list may need to be corrected
const $layers = $svg.find("a,circle,clipPath,ellipse,image,line,marker,mpath,path,polygon,polyline,rect,symbol,text,textPath");
// Add hover events, because I can't get css :hover {fill:rgba(125,125,125,0.5)} to work
$layers.hover(
// On hover start
function()
{
// Get the element we are hovering over
const $layer = $(this);
// Get current color
const fill = $layer.css("fill"); // this might not work on elements that don't have fills
// Store fill as data for uee on hover off
$layer.data("fill",fill);
// Create inverse of fill, you'll have to implement your own invert function, or just use one color for all hovers
const inverse = ag.invert(fill);
// If doesn't have fill, will have to implement another hover for that scenario
if(inverse == null) return;
// Use standard jquery css interface to change fill
$layer.css("fill",inverse);
},
// On hover end
function(){
// Undo hover on $layer
const $layer = $(this);
// Set css fill to .data("fill")
$layer.css("fill",$layer.data("fill"));
}
);
专注分享java语言的经验与见解，让所有开发者获益！
评论