为什么 <path> svg 悬停没有被 JavaFX 触发？

Question

我正在使用Java 11和独立的JavaFX模块构建一个PyCharm插件。

该插件包含从 HTML 文件加载其内容的javafx.scene.web.WebView。HTML 除了标准 HTML 元素外，还包含 SVG 元素，例如<rect>和<path>。

我遇到了 JavaFX WebView 行为的问题 - 当我将鼠标悬停在<path>元素上时，悬停操作永远不会被触发，悬停样式也不会触发。当我在 Chrome 中运行相同的代码时，它可以正常工作。当我使用 Java 8 和 JavaFX 运行时，它也可以正常工作。

JavaFX是否完全支持SVG，这只是一个错误？ 有什么解决方法可以尝试解决此问题吗？

我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

Answer 1

对我有用，我在页面上执行这个准备好了：

// 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"));
}
);