Java GXT3：如何实现svg按钮

与png/gif图标相比，使用SVG图标有很多优势。因此，我想实现一个svg按钮类作为gwt小部件。GXT 3中已经存在一些东西了吗？或者，实现这样一个小部件的最佳选择是什么？谢谢

---

更多详情：

---

我需要一个纯可点击的svg图标，就像一个按钮小部件。它需要有鼠标点击处理程序，并能够在三种状态下应用不同的css：正常、悬停、禁用。我不希望按钮内有svg图标。

在支持svg的浏览器中，svg可以像使用图像文件（png/jpg/etc）一样使用。GXT/GWT不应该有什么区别，您只需要应用图像

与构建自己的小部件（当然，这是一个选项）不同，您可以使用内置小部件，这些小部件可以被告知使用任何图像或css类（取决于小部件）

例如，GXT的

TextButton

有一个

setIcon

方法，该方法采用

ImageResource

。通常，这些都是在

ClientBundle

中创建的，但是GWT的

ClientBundle

的代码生成不知道SVG是什么

ImageResource

接口在GWT中内置了一个实现，

ImageResourcePrototype

，允许您指定所需的所有参数。第二个参数是url，即图像的路径，只要浏览器支持，就会呈现该路径。因此，我们需要将要使用的SVG文件放入ImageResourcePrototype中

    ImageResource icon = new ImageResourcePrototype("icon", UriUtils.fromSafeConstant("/path/to/my.svg"), 0, 0, 20, 20, false, false);
    TextButton button = new TextButton("square", icon);
    RootPanel.get().add(button);

现在，您只需传入一个普通的URL就可以做到这一点，但是我们并不比普通的图像好多少，因为我们仍然需要往返到服务器-大多数图标按钮只有几kb，但是HTTP调用的开销可能非常大，因此SVG也同样糟糕。谢天谢地，GWT中所有内置的

ImageResource

s都已经绑定到应用程序中，因此不需要HTTP调用。事实证明，我们还可以捆绑svg文件，尽管我们需要让浏览器能够正确处理它

将SVG文件与Java一起放入源代码中，我们将把它打包成一个包。我将这个非常无聊的图标放入一个名为

icon.svg

的文件中：

<svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

---

通过向GWT中的ImageResourceGenerator添加对.svg文件的支持，这可能会变得更容易，但这并不是一个非常常见的用例

---

好的，那么SVG对光栅图像有什么影响呢？对于大图像，很多！对于相同的细节级别，它们可以小得多，因为它们可以很好地拉伸，但是对于小图标，它可以命中或未命中。动态更改有关它们的一些详细信息更容易，但这实际上超出了在gwt中如何使用SVG的问题范围（有关许多简单的SVG渲染工具，请参阅GXT的图表/绘图库），而且对于按钮上的单个图像通常并不重要。图标图像很小，在这里节省了一些字节，而且可能没有有效地利用time-plus，SVG在浏览器中渲染要比简单得多的图像花费更多的时间（不过，对于非常小的浏览器来说，差异将是最小的）

---

编辑，尝试解决问题编辑而不是原始点

SVG元素几乎是普通的dom元素，不过请检查您需要支持哪些浏览器以确保它们正常工作。快速介绍如何构建元素以更正其名称空间，从而使浏览器能够正确使用它们。除此之外，它们的行为与GWT中的普通dom元素大致相同。我通常建议您像对待GWT中的普通dom元素一样对待它们，因此您的小部件不应该将处理程序附加到子元素，而应该像对待每个小部件一样使用

addDomHandler

。考虑到SVG元素相互重叠的能力（基于DOM中的顺序），如果你需要准确地知道鼠标是什么的，你可以考虑其他方法来查看哪个元素在其他元素之上（虽然对于一个按钮来说，这并不重要）。

---

如上所述，GXT的绘图工具提供了一个DrawComponent类，它可以使用SVG，让您获得每个绘制的精灵发生的事件，并针对不同的浏览器问题进行规范化（如果可能，支持画布，如果必要，支持VML）。

对不起，我想我还不够清楚。使用gxt TextButton对我来说不是一个选项，因为我想要一个纯可点击的svg图标，而不是一个包含图像的按钮。我已经编辑了我的问题，明白了-我会更新答案，但真正简短的版本是，只要您使用GXT3，请查看绘图库，其中为您介绍了这一点。图表只是使用它们的一种方式，你几乎可以从中构建任何东西。是我制作的一个小项目，用于构建图形，您可以通过鼠标或触摸进行调整，并且在我有时间重写答案之前可能会给您一些提示。很抱歉@Alex的延迟，现在已更新，但简而言之，SVG只是dom中的另一种元素，因此您的小部件可以包装。如果您有具体的问题，请在另一个问题中附上您迄今为止尝试过的代码。

public class SampleIconEntryPoint implements EntryPoint {
    interface Bundle extends ClientBundle {
        @Source("icon.svg")
        @MimeType("image/svg+xml")
        DataResource icon();
    }

    @Override
    public void onModuleLoad() {
        Bundle bundle = GWT.create(Bundle.class);
        ImageResource icon = new ImageResourcePrototype("icon", bundle.icon().getSafeUri(), 0, 0, 50, 50, false, false);
        TextButton button = new TextButton("square", icon);
        RootPanel.get().add(button);
    }
}