Question

我想通过单击按钮更改应用于SVG的类。代码是here。

我的SVG看起来像：

<svg id="test" class="fill" xmlns="http://www.w3.org/2000/svg" width="100%" height="200px" >
      <path id="path22276" d="m500 81c-41-6-110-35-110-46 0-6 32 6 48 19 8 5 53 12 101 14 78 4 93 1 144-22 32-14 60-26 64-26 8 0-37 34-62 47-28 15-131 22-185 14z"/>
</svg>

我尝试了以下代码：

  document.getElementById("test").className = "halffill";
  document.querySelector("svg.fill").setAttribute("class","halffill");

我针对普通的div标签测试了相同的javascript代码。它工作正常。 SVG有一些限制吗？请帮我解决这个问题。

Answer 1

SVG元素上的Traceback (most recent call last): File "/home/pi/Stepper_Motors/MainProgram.py", line 25, in <module> stepper.moveMotor() File "/home/pi/Stepper_Motors/stepper.py", line 149, in moveMotor result = D_Alt - C_Alt #find number of steps to move NameError: global name 'D_Alt' is not defined >>>属性与HTML元素的className属性具有不同的定义。

在HTML中，className是一个字符串。在SVG中，它是className对象。这就是为什么你不能做SVGAnimatedString。

但是，第二行（使用svgElement.className = "halffill"）应该有效。

Answer 2

setAttribute版本适合我。对于className，您需要SVG中的baseVal：

document.getElementById("test").className.baseVal = "halffill";

Answer 3

问题是javascript不会在源代码中更新。您需要检查检查模式中的更改。第一个对我不起作用，但第二个起作用。

document.querySelector("svg.fill").setAttribute("class","halffill");

单击要更改类名称的按钮，然后转到检查模式并检查 svg 标记的类名

注意：要进入检查模式，请右键单击屏幕上的任意位置，然后单击检查或在Windows中的谷歌浏览器中使用ctrl + shift + I.

Answer 4

问题是javascript 加载类型设置为onload，使得函数调用加载正文而不是按钮的onclick。

解决方案：您可以在javascript部分的右上方看到齿轮图标。点击它并将加载类型更改为不换行-in ＆lt; head＆gt;

Answer 5

或者您可以使用classList属性：

的document.getElementById（ “测试”）classList.add（ “halffill”）;

Answer 6

要使用任何html元素类，可以使用此util函数：

let SVGAnimatedString = function () {}
if (typeof window !== 'undefined') {
  SVGAnimatedString = window.SVGAnimatedString
}

export function convertToArray (value) {
  if (typeof value === 'string') {
    value = value.split(' ')
  }
  return value
}

/**
 * Add classes to an element.
 * This method checks to ensure that the classes don't already exist before adding them.
 * It uses el.className rather than classList in order to be IE friendly.
 * @param {object} el - The element to add the classes to.
 * @param {classes} string - List of space separated classes to be added to the element.
 */
export function addClasses (el, classes) {
  const newClasses = convertToArray(classes)
  let classList
  if (el.className instanceof SVGAnimatedString) {
    classList = convertToArray(el.className.baseVal)
  } else {
    classList = convertToArray(el.className)
  }
  newClasses.forEach((newClass) => {
    if (classList.indexOf(newClass) === -1) {
      classList.push(newClass)
    }
  })
  if (el instanceof SVGElement) {
    el.setAttribute('class', classList.join(' '))
  } else {
    el.className = classList.join(' ')
  }
}

/**
 * Remove classes from an element.
 * It uses el.className rather than classList in order to be IE friendly.
 * @export
 * @param {any} el The element to remove the classes from.
 * @param {any} classes List of space separated classes to be removed from the element.
 */
export function removeClasses (el, classes) {
  const newClasses = convertToArray(classes)
  let classList
  if (el.className instanceof SVGAnimatedString) {
    classList = convertToArray(el.className.baseVal)
  } else {
    classList = convertToArray(el.className)
  }
  newClasses.forEach((newClass) => {
    const index = classList.indexOf(newClass)
    if (index !== -1) {
      classList.splice(index, 1)
    }
  })
  if (el instanceof SVGElement) {
    el.setAttribute('class', classList.join(' '))
  } else {
    el.className = classList.join(' ')
  }
}

无法更改SVG元素的类名

6 个答案: