javascript - SVG 片段被错误地解析为 HTMLUnknownElement-6ren

javascript - SVG 片段被错误地解析为 HTMLUnknownElement

转载作者：行者123 更新时间：2023-11-29 15:03:42

24

4

我在使用 Javascript 编写内联 SVG 时遇到了问题。
该问题可以简化为以下代码 ( live example here ):

体内某处:

<svg id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1">
</svg>

内部onReady:

$("#drawing").append($("<rect style='fill: blue' width='100' height='100' />"));

我希望现在看到一个蓝色矩形。但是，Chrome 和 Firefox 不显示任何内容。

使用 Firebug，我发现 Firefox 将“rect”解释为 HTMLUnknownElement(而不是 SVGElement)。
如果我在 SVG 元素上选择“编辑 SVG”(使用 Firebug)并在某处插入空格，SVG 似乎被重新解析并出现矩形。

我怎样才能告诉解析器正确解析这个片段？

最佳答案

恐怕没那么容易:

jsfiddle 不是测试 svg 的地方，它发送错误的内容类型
不能以 html 方式创建对外部 js 文件的引用(请记住，svg 不必对 html 做任何事情)
jquery 在使用 append() 时使用一些虚拟 div 来创建元素，但 svg 不知道 div 元素
另请注意:使用 jQuery 绑定(bind)到 svg 文档的加载事件似乎不起作用

这是一个示例代码，当以 image/svg+xml 形式交付时，在 FF 中对我有用

<svg id="drawing" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1"  
     onload="fx()">
  <script type="text/ecmascript" xlink:href="http://code.jquery.com/jquery-latest.js" />
  <script type="text/ecmascript">
  function fx()
  {
   $(document.createElementNS('http://www.w3.org/2000/svg', 'rect'))
     .css('fill','blue')
     .attr({'width':100,'height':100})
     .appendTo('#drawing');
   }
  </script>  
</svg>

但像 Marcin 一样，我建议使用插件。

要从父文档添加，您可以使用包含元素属性的对象，基本示例:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script  type="text/javascript">
/*<![CDATA[*/

function fx(obj,params)
{
  var svgDoc=obj.contentDocument;
  if(typeof params.name!='string')return;
  var props=$.extend({'attrs':{},'style':{},'selector':null},params);
      props.target=(!props.selector)?svgDoc.documentElement:$(svgDoc).find(props.selector)

    $(svgDoc.createElementNS('http://www.w3.org/2000/svg', props.name))
     .css(props.style)
     .attr(props.attrs)
     .appendTo(props.target);
}

/*]]>*/
</script>
</head>
<body>
  <object onload="fx(this,{'name':'rect','attrs':{'width':100,'height':100},'style':{'fill':'blue'},'selector':'#drawing'})" 
          data="my.svg" 
          type="image/svg+xml" 
          width="200" 
          height="200">
    <param name="src" value="my.svg">
  </object>
</body> 
</html>

对象的结构:

名称:标签名称(字符串)
属性:属性(对象)
样式:样式(对象)
selector:selector(string, 如果省略则选择根元素)

关于javascript - SVG 片段被错误地解析为 HTMLUnknownElement，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6075120/

24

4

0

文章推荐： Mysql "safe"合并

文章推荐： javascript - CakePHP 无法同时处理两个 Ajax 请求？

文章推荐： php - 建议我，更改默认的 Joomla 代码结构是个好主意吗？

JavaScript:如何检查 "HTMLUnknownElement"？
我创建了一个用于创建 DOM 元素的函数: function getHtmlElement(nodeName, attrs, innerHtml) { var ret = null; if (
javascript - Safari:找不到变量:HTMLUnknownElement
根据 MDN，包括 Safari 在内的所有浏览器都支持 HTMLUnknownElement:https://developer.mozilla.org/en-US/docs/Web/API/HTM
javascript - HTMLSpanElement 与 HTMLUnknownElement
引用文献: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement https://developer.mozilla.org
javascript - SVG 片段被错误地解析为 HTMLUnknownElement
我在使用 Javascript 编写内联 SVG 时遇到了问题。该问题可以简化为以下代码 ( live example here ): 体内某处: 内部onReady: $("#drawing"
javascript - 当浏览器未实现 HTMLUnknownElement 时，如何检查元素是否为未知类型
我需要在解析 DOM 中的元素时知道它们是否是未知元素。到目前为止我通常已经完成: element instanceof HTMLUnknownElement 这在大多数情况下都很好，但事实证明并非所
jquery - 使用 jQuery.find() 和 XML 文档获取 HTMLUnknownElement
我正在尝试通过 Ajax 请求加载 XML 文档(特别是 RSS 提要)，对其进行解析，然后将一些基于所述提要的信息插入到我的页面中。该代码在 Firefox、Opera、Chrome 和 Safar
javascript - 使用 JavaScript(无 JQuery)从 [object, HTMLUnknownElement] 获取innerHTML
所以，我正在编写一个脚本来查找 tagName 为 ui 的元素，并将标签内的内容打印到控制台: CONTENT_HERE 我正在使用以下代码来执行此操作。 var e = document.getE

首页

博学

6Ren·AI

商城

javascript - SVG 片段被错误地解析为 HTMLUnknownElement