内联SVG上的jQuery toggleClass [英] Jquery toggleClass on inline SVG

问题描述

我有一个内联SVG(站点地面植物的考古图)的布局，在侧边栏中有一些解释性文字，我想更改我在SVG内创建的组的某些属性通过切换不同组的类别.
我正在尝试使用JQuery的toggleClass()，但是它不起作用.我想将对类的更改绑定到边栏上<span>元素上的某些click事件.
jQuery不能与SVG一起使用吗?

I've got a layout with an inline SVG (an archaeological drawing of a site's floor plant) with some explanatory text in a sidebar and I would like to change some of the attributes of the groups I've made inside the SVG by toggling the classes of the different groups.
I'm trying to use JQuery's toggleClass() but it is not working. I would like to bind the changes on the class to some click events on <span> elements on the sidebar.
Does Jquery not work with SVG?

推荐答案

否. jQuery旨在与HTML一起使用. SVG元素位于SVG命名空间中，而jQuery函数通常不适用于它们.

No. jQuery is designed to work with HTML. SVG elements are in the SVG namespace and the jQuery functions generally don't work on them.

您可以使用setAttribute()修改SVG元素的class:

You can modify an SVG element's class using setAttribute():

mysvgelement.setAttribute("class", someclass);

或使用各种JS支持库之一进行SVG操作.

Or use one of the various JS support libraries for SVG manipulation.

这篇关于内联SVG上的jQuery toggleClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！