jquery append 不适用于 svg 元素？

coder 2023-04-23 原文

假设:

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
 });
 </script>
</head>
<body>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
 </svg>
</body>

为什么我什么都看不到？

最佳答案

当您将标记字符串传递给 $ 时，使用浏览器的 innerHTML 将其解析为 HTML <div> 上的属性(property)(或其他适合特殊情况的容器，如 <tr> )。 innerHTML无法解析 SVG 或其他非 HTML 内容，即使可以解析，它也无法判断 <circle>应该在 SVG 命名空间中。

innerHTML在 SVGElement 上不可用——它只是 HTMLElement 的属性。目前也没有innerSVG属性或其他方式 (*) 将内容解析为 SVGElement。出于这个原因，您应该使用 DOM 样式的方法。 jQuery 无法让您轻松访问创建 SVG 元素所需的命名空间方法。真的，jQuery 根本不是为与 SVG 一起使用而设计的，许多操作可能会失败。

HTML5 promise 让您使用 <svg>没有 xmlns将来在纯 HTML ( text/html ) 文档中。但这只是一个解析器 hack(**)，SVG 内容仍然是 SVG 命名空间中的 SVGElements，而不是 HTMLElements，因此您将无法使用 innerHTML即使它们看起来像 HTML 文档的一部分。

但是，对于当今的浏览器，您必须使用 XHTML(正确地作为 application/xhtml+xml ；保存为 .xhtml 文件扩展名以进行本地测试)才能让 SVG 正常工作。 (无论如何这有点道理；SVG 是一个适当的基于 XML 的标准。)这意味着您必须转义 <脚本 block 中的符号(或包含在 CDATA 部分中)，并包括 XHTML xmlns声明。示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
    <svg id="s" xmlns="http://www.w3.org/2000/svg"/>
    <script type="text/javascript">
        function makeSVG(tag, attrs) {
            var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
            for (var k in attrs)
                el.setAttribute(k, attrs[k]);
            return el;
        }

        var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
        document.getElementById('s').appendChild(circle);
        circle.onmousedown= function() {
            alert('hello');
        };
    </script>
</body></html>

*:嗯，有 DOM Level 3 LS 的 parseWithContext ，但浏览器支持很差。编辑添加:然而，虽然您不能将标记注入(inject) SVGElement，但您可以使用 innerHTML 将新的 SVGElement 注入(inject) HTMLElement。，然后将其转移到所需的目标。不过可能会慢一些:

<script type="text/javascript"><![CDATA[
    function parseSVG(s) {
        var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
        div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
        var frag= document.createDocumentFragment();
        while (div.firstChild.firstChild)
            frag.appendChild(div.firstChild.firstChild);
        return frag;
    }

    document.getElementById('s').appendChild(parseSVG(
        '<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
    ));
]]></script>

**:我讨厌 HTML5 的作者似乎害怕 XML，并决心将基于 XML 的功能硬塞进 HTML 的困惑中。 XHTML 多年前就解决了这些问题。

关于jquery append 不适用于 svg 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3642035/

jquery append code 34 lt html svg

有关jquery append 不适用于 svg 元素？的更多相关文章

ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2
大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje
Ruby Sinatra 配置用于生产和开发 - 2
我已经在Sinatra上创建了应用程序，它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择，是开发还是生产，一些方法的逻辑应该改变，这取决于部署类型。是否有任何想法，如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现？最佳答案根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm
ruby - inverse_of 是否适用于 has_many？ - 2
当我使用has_one时，它工作得很好，但在has_many上却不行。在这里您可以看到object_id不同，因为它运行了另一个SQL来再次获取它。ruby-1.9.2-p290:001>e=Employee.create(name:'rafael',active:false)ruby-1.9.2-p290:002>b=Badge.create(number:1,employee:e)ruby-1.9.2-p290:003>a=Address.create(street:"123MarketSt",city:"SanDiego",employee:e)ruby-1.9.2-p290
ruby - 在哈希的键数组中追加元素 - 2
查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？最佳答案如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用
「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
ruby - Hanami link_to 助手只呈现最后一个元素 - 2
我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm
ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2
在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c
ruby - "undefined method"用于 rails 模型 - 2
我正在使用带有Rails的Devise，我想添加一个方法“getAllComments”，所以我这样写:classUser在我的Controller中:defdashboard@user=current_user@comments=@user.getAllComments();end当我访问我的url时，我得到了undefinedmethod`getAllComments'for#我做错了什么？谢谢最佳答案因为getAllComments是一个类方法，而您正试图将其作为实例方法访问。您要么需要访问它:User.getAllCom
Ruby on Rails regexp equals-tilde 与 array include 用于检查选项列表 - 2
我正在使用Rails3.2.3和Ruby1.9.3p0。我发现我经常需要确定某个字符串是否出现在选项列表中。看来我可以使用Ruby数组.includemethod:或正则表达式equals-tildematchshorthand用竖线分隔选项:就性能而言，一个比另一个好吗？还有更好的方法吗？最佳答案总结:Array#include?包含String元素，在接受和拒绝输入时均胜出，对于您的示例只有三个可接受的值。对于要检查的更大的集合，看起来Set#include?和String元素可能会获胜。如何测试我们应该根据经验对此进行测试
arrays - 计算数组中的匹配元素 - 2
给定两个大小相等的数组，如何找到不考虑位置的匹配元素的数量？例如:[0,0,5]和[0,5,5]将返回2的匹配项，因为有一个0和一个5共同；[1,0,0,3]和[0,0,1,4]将返回3的匹配项，因为0有两场，1有一场；[1,2,2,3]和[1,2,3,4]将返回3的匹配项。我尝试了很多想法，但它们都变得相当粗糙和令人费解。我猜想有一些不错的Ruby习惯用法，或者可能是一个正则表达式，可以很好地回答这个解决方案。最佳答案您可以使用count完成它:a.count{|e|index=b.index(e)andb.delete_at

jquery append 不适用于 svg 元素？

有关jquery append 不适用于 svg 元素？的更多相关文章

随机推荐