Question

我正在撰写一部基础设施,需要以不同的方式适用于超文本部分和特别志愿人员部分。鉴于DOM的口号,我怎么能够告诉它是否带有特别志愿人员或超文本元素?

Answer 1

您可尝试如下内容:

if(document.getElementById("el") instanceof SVGElement) {
    console.log("It s an SVG element");
}

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  width="300" height="300">
  <g id="firstGroup">
    <rect id="el" width="100" height="50" x="40" y="20" fill="blue" />
    <text x="40" y="100">This is a basic SVG document!</text>
  </g>
</svg>

注:<代码><svg> 元件本身实际上是一个超文本元素载于<>>>>> 代码元件——这意味着,或许令人惊讶的是,<代码><svg> HTML元件为not<>>>/em> 代码> SVG 元件。

console.log(document.createElement("svg") instanceof SVGElement)) // => false

Answer 2

我不敢确定交叉浏览器如何兼容,但我正在通过OMS的特性 p,看到一个“<代码>所有人SVGElement/code”似乎有希望吗?

在此,我与以下几个方面进行了联系:。

Answer 3

如果你想要把其他东西分开,那么你可以列出所有特征,找到最令人难以置信的特性,并以典型使用案例加以验证。

function getElementType(el) {
  switch (el.namespaceURI) {
    case  http://www.w3.org/1999/xhtml : return  html ; // for HTML/XHTML
    case  http://www.w3.org/2000/svg : return  svg ; // for SVG
    case  http://www.w3.org/1998/Math/MathML : return  math ; // for MathML
    default: return  xml ;
  }
}

Answer 4

如果您需要在<>虚拟空间环境中(如J.DOM)进行测试,你可能无法检索正确的特殊空间单元类型或名称空间。

In this case you may check whether an element is wrapped in an SVG via closest() method (it also returns true if the current element is a SVG).

console.log(isSVGEl(svg))
console.log(isSVGEl(foreignObject))
console.log(isSVGEl(aHtml))
console.log(isSVGEl(aSvg))
console.log(isSVGEl(filter))
console.log(isSVGEl(svgInForeign))


function isSVGEl(el) {
  let inSVG = el.closest( svg ) ? true : false
  let inForeignObject = el.closest( foreignObject ) ? true : false
  let isSVGElement = inSVG && inForeignObject ? (el.nodeName === el.nodeName.toLowerCase() ? true : false) : true


  let data = {
    nodeName: el.nodeName,
    inSVG: inSVG,
    inForeignObject: inForeignObject,
    isSVGElement: isSVGElement
  }
  console.log(data)
  return inSVG
}

<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
  
  <filter id="filter">
    <feGaussianBlur stdDeviation="5" />
  </filter>
  
  <g id="g">
    <rect id="rect" width="100%" height="100%" x="0" y="0"  fill="#ccc" />
    
    <a id="aSvg" href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject">
      <text id="text" x="50%" y="50%" font-size="10%" fill="blue">Svg link</text></a>

  </g>
  <!-- Common use case: embed HTML text into SVG -->
  <foreignObject id="foreignObject" x="0" y="0" width="50" height="50">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:5px">
      foreignObject:
      <a id="aHtml" href="#">HTML link</a>
      
      <svg id="svgInForeign" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  viewBox="0 0 100 100">
  </svg>


</div>
</foreignObject>
</svg>

Obviously, this requires your virtual DOM parser to support closest().
The above example also checks HTML elements within a ´`. In this case you need to my include additional data for you needs: e.g if element is wrapped in a foreignObject (so part of an SVG) but essentially a HTML element.

友情链接